我不喜欢这里的解决方案（包括我先前提供的解决方案），原因如下：
- 这个问题的投票最高的答案是，你必须手动同步脚本标签的列表，当你添加/重命名/删除JS文件。
- 可接受答案的问题在于您的JS文件列表不能具有模式匹配。这意味着您必须在Gruntfile中手动对其进行更新。
我已经弄清楚了如何解决这两个问题。我已经设置了grunt任务，以便每次添加或删除文件时，都会自动生成脚本标签来反映这一点。这样，您在添加/删除/重命名JS文件时无需修改html文件或grunt文件。
总结一下它是如何工作的，我有一个带有脚本标记变量的html模板。我使用https://github.com/alanshaw/grunt-include-replace填充该变量。在开发模式下，该变量来自我所有JS文件的浮动模式。添加或删除JS文件时，监视任务会重新计算该值。
现在，要在开发或生产模式下获得不同的结果，只需用不同的值填充该变量。这是一些代码：
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是您典型的咕unt文件混淆模式。 jsScriptTags接受jsSrcFileArray并将它们与script两侧的标签连接在一起。 destPath是我要在每个文件上使用的前缀。
这是HTML的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
现在，正如您在配置中看到的那样，script当它在prod模式下运行时，我会将该变量的值生成为硬编码标签。在开发人员模式下，此变量将扩展为以下值：
<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应用程序中执行的操作，这是很多代码。我希望有人可以将其变成可重用的插件。也许有一天。