我可以指示 Grunt 连接 index.html 中定义的所有 JS 文件吗？答案

【问题标题】：Can I instruct Grunt to concat all JS files defined in index.html?我可以指示 Grunt 连接 index.html 中定义的所有 JS 文件吗？
【发布时间】：2014-06-03 15:56:23
【问题描述】：

我可以指示 Grunt 连接所有定义在 index.html 没有具体命名？
Grunt 是否也可以创建新的 index.html 文件来加载连接的 JS 文件之前的多个文件？
Grunt 可以同时对 JS 文件进行 uglify 吗？
Grunt 是否不仅可以对 JS 文件执行此操作，还可以对给定 html 文件中使用的 CSS 文件执行此操作？

我花了很多时间在谷歌上搜索，但 Grunt 生态系统似乎如此分散，对我来说如此陌生:(。

PS：我决定使用 Grunt 是因为 WebStorm 8 中有直接集成，但也许其他工具更适合此任务？

【问题讨论】：

标签： gruntjs bundling-and-minification uglifyjs

【解决方案1】：

有许多不同的解决方案可用，这就是它看起来支离破碎的原因。我将描述一些看似流行的方法。

使用grunt-usemin
您在 HTML 中指定块，它会读取并提供给您的其他 Grunt 任务（concat、uglify 等）。他们的文档有大量示例来处理许多不同的场景。
使用模块捆绑器，例如 grunt-webpack、grunt-browserify 或 grunt-contrib-requirejs
不要在 HTML 中添加脚本标签，而是在需要时使用 require() 语法来包含文件。这取决于方法，会将脚本添加到您的页面或捆绑到单个文件中。这些方法通常只需要包含一个 javascript 文件。

探索并找出最适合您需求的解决方案。

【讨论】：

这里只是提一下，usemin 不再维护。使用风险自负。

【解决方案2】：

我通过在我的 Gruntfile 顶部添加这个函数解决了这个问题：

var isCssRegex = /^\s*<\s*link.*href=["']([^"']*)["'].*$/i;
var isJsRegex = /^\s*<\s*script.*src=["']([^"']*)["'].*$/i;
var extractJsRegex = /src\s*=\s*"(.+?)"/
var extractCssRegex = /href\s*=\s*"(.+?)"/

function extractFilenames(src, type) {
    var filenames = [];
    var data = require('fs').readFileSync(src, 'utf8');
    var lines = data.replace(/\r\n/g, '\n').split(/\n/);
    var webContent = require('path').dirname(src);

    lines.forEach(function (line) {
        if (line.match(type === 'css' ? isCssRegex : isJsRegex)) {
            var src = line.match(type === 'css' ? extractCssRegex : extractJsRegex)[1];
            filenames.push(webContent + '/' + src);
        }
    });

    return filenames;
};

然后在我的 concat 任务中，我可以这样做：

concat: {
    js: {
        src: extractFilenames('src/main/resources/public/index.html', 'js'),
        dest: 'build/app.js'
    },

    css: {
        src: extractFilenames('src/main/resources/public/index.html', 'css'),
        dest: 'build/style.css'
    }
},

【讨论】：