我不喜欢这里的解决方案(包括我之前给出的)，原因如下:
投票最多的答案的问题是，当你添加/重命名/删除一个JS文件时，你必须手动同步脚本标签列表。
接受的答案的问题是你的JS文件列表不能有模式匹配。这意味着你必须在Gruntfile中手动更新它。
我已经找到了解决这两个问题的方法。我已经设置了grunt任务，以便每次添加或删除文件时，都会自动生成脚本标记来反映该任务。这样，当你添加/删除/重命名JS文件时，你不需要修改你的html文件或grunt文件。
为了总结它是如何工作的，我有一个带有脚本标记变量的html模板。我使用https://github.com/alanshaw/grunt-include-replace填充该变量。在开发模式下，该变量来自我所有JS文件的通配符模式。当添加或删除JS文件时，监视任务会重新计算这个值。
现在，要在dev或prod模式中获得不同的结果，只需用不同的值填充该变量。下面是一些代码:
var jsSrcFileArray = [
'src/main/scripts/app/js/Constants.js',
'src/main/scripts/app/js/Random.js',
'src/main/scripts/app/js/Vector.js',
'src/main/scripts/app/js/scripts.js',
'src/main/scripts/app/js/StatsData.js',
'src/main/scripts/app/js/Dialog.js',
'src/main/scripts/app/**/*.js',
'!src/main/scripts/app/js/AuditingReport.js'
];
var jsScriptTags = function (srcPattern, destPath) {
if (srcPattern === undefined) {
throw new Error("srcPattern undefined");
}
if (destPath === undefined) {
throw new Error("destPath undefined");
}
return grunt.util._.reduce(
grunt.file.expandMapping(srcPattern, destPath, {
filter: 'isFile',
flatten: true,
expand: true,
cwd: '.'
}),
function (sum, file) {
return sum + '\n<script src="' + file.dest + '" type="text/javascript"></script>';
},
''
);
};
...
grunt.initConfig({
includereplace: {
dev: {
options: {
globals: {
scriptsTags: '<%= jsScriptTags(jsSrcFileArray, "../../main/scripts/app/js")%>'
}
},
src: [
'src/**/html-template.html'
],
dest: 'src/main/generated/',
flatten: true,
cwd: '.',
expand: true
},
prod: {
options: {
globals: {
scriptsTags: '<script src="app.min.js" type="text/javascript"></script>'
}
},
src: [
'src/**/html-template.html'
],
dest: 'src/main/generatedprod/',
flatten: true,
cwd: '.',
expand: true
}
...
jsScriptTags: jsScriptTags
jsSrcFileArray是典型的grunt文件替换模式。jsScriptTags接受jsSrcFileArray，并将它们与两侧的脚本标记连接在一起。destPath是我想在每个文件上使用的前缀。
下面是HTML的样子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
现在，正如您在配置中看到的，当它在prod模式下运行时，我将该变量的值生成为一个硬编码的脚本标记。在dev模式下，该变量将展开为如下值:
<script src="../../main/scripts/app/js/Constants.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Random.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Vector.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/StatsData.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Dialog.js" type="text/javascript"></script>
如果你有任何问题请告诉我。
PS:对于我想在每个客户端JS应用中做的事情来说，这是一个疯狂的代码量。我希望有人能把它变成一个可重用的插件。也许有一天我会的。
