怎么使用grunt将多个文件合并为一个，并且保持html中引用路径不变？

在使用grunt合并文件后，我们需要修改html中的引用路径，以使其指向合并后的文件。但是，如何保持原来的路径不变呢？

我们可以使用grunt-contrib-copy插件，将原来html文件复制到一个新的目录，然后在这个复制的html文件中引用合并后的文件。这样，就可以保持原有的引用路径不变。

具体的做法是：

1. 安装grunt-contrib-copy插件：npm install grunt-contrib-copy --save-dev

2. 在Gruntfile.js中添加如下代码：

copy: {
    html: {
        expand: true,
        cwd: 'src/',
        src: ['*.html'],
        dest: 'dist/',
        options: {
            process: function (content, srcpath) {
                return content.replace(/(scriptlink).*?src="(.*?)"/g, function (match, tag, url) {
                    if (/^https?:\/\//.test(url)) {
                        return match; // 不处理外部链接
                    }
                    var file = url.replace(/\?.*$/, ''); // 去掉查询参数
                    var filepath = 'js/' + file + '.min.js'; // 这里假设合并后的文件在js目录下，并以min.js为后缀
                    var prefix = url.indexOf('/') === 0 ? '' : '../'; // 根据相对路径的情况，添加前缀
                    return tag + ' href="' + prefix + filepath + '"'; // 返回替换后的内容
                });
            }
        }
    }
},

3. 修改concat任务配置，并添加copy任务依赖：

grunt.initConfig({
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            src: ['src/js/*.js'],
            dest: 'dist/js/all.min.js'
        }
    },
    copy: {
        html: {...}
    }
});

grunt.registerTask('build', ['concat', 'copy:html']);

在执行grunt build任务后，我们将会得到一个新的html文件，并会发现引用路径已经被替换为合并后的文件路径了。