私はここでの解決策（以前に私が与えたものを含む）が嫌いであり、ここに理由があります：
- 投票数が最も多い回答の問題は、 JSファイルを追加/名前変更/削除するときにスクリプトタグのリストを手動で同期する必要があることです。
- 受け入れられた回答の問題は、 JSファイルのリストにパターンマッチングを設定できないことです。つまり、Gruntfileで手動で更新する必要があります。
私はこれらの問題の両方を解決する方法を見つけました。ファイルが追加または削除されるたびにスクリプトタグが自動的に生成され、それを反映するように、うなり声タスクを設定しました。このようにして、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は、典型的な不快なファイル展開パターンです。 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アプリで私がやりたいことを実行するために必要なコードの量が非常に多いものです。誰かがこれを再利用可能なプラグインに変えられることを願っています。多分私はいつか行きます。