我能否指示Grunt将在index.html中定义的所有JS文件合并？

Question

1. 我可以指示Grunt将index.html中定义的所有JS文件合并在一起，而不必明确命名吗？
2. Grunt是否也能创建新的index.html文件，以加载连接的JS文件而不是以前的多个文件？
3. Grunt是否也能同时混淆JS文件？
4. Grunt是否只能针对html文件中使用的CSS文件来完成此操作？

我花费了大量时间搜索，但Grunt生态系统似乎非常分散和陌生 :(。

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

- daniel.sedlacek

Answer 1

有许多不同的解决方案可用，这就是为什么它看起来很零散。我将描述几种看似流行的方法。

1. 使用 grunt-usemin
   您可以在HTML中指定块，它会读取并提供给其他Grunt任务（concat、uglify等）。他们的文档有广泛的示例来处理许多不同的方案。

2. 使用模块打包工具，例如grunt-webpack、grunt-browserify或grunt-contrib-requirejs
   不要向您的HTML添加脚本标签，而是在需要时使用require()语法包含文件。根据所选的方法，这将添加脚本到您的页面或捆绑到单个文件中。这些方法通常只需要包含一个JavaScript文件。

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

- Kyle Robinson Young

---

只是想提一下，usemin已经不再维护了。使用时请自行承担风险。 - Stranded Kid

Answer 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: {
    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'
    }
},

- Adam