Question

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

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

Answer 1

有许多不同的解决方案，这就是为什么它似乎支离破碎。我将描述几种看似流行的方法。

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

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

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任务中，我可以这样做：

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'
    }
},

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

2 个答案: