Ich mag die Lösungen hier nicht (einschließlich der, die ich zuvor gegeben habe ) und hier ist der Grund:
- Das Problem mit der Antwort mit der höchsten Bewertung besteht darin, dass Sie die Liste der Skript-Tags manuell hinzufügen müssen, wenn Sie eine JS-Datei hinzufügen / umbenennen / löschen.
- Das Problem mit der akzeptierten Antwort ist, dass Ihre Liste der JS-Dateien keine Musterübereinstimmung aufweisen kann. Dies bedeutet, dass Sie es im Gruntfile von Hand aktualisieren müssen.
Ich habe herausgefunden, wie ich diese beiden Probleme lösen kann. Ich habe meine Grunzaufgabe so eingerichtet, dass jedes Mal, wenn eine Datei hinzugefügt oder gelöscht wird, die Skript-Tags automatisch generiert werden, um dies widerzuspiegeln. Auf diese Weise müssen Sie weder Ihre HTML-Datei noch Ihre Grunzdatei ändern, wenn Sie Ihre JS-Dateien hinzufügen / entfernen / umbenennen.
Um zusammenzufassen, wie das funktioniert, habe ich eine HTML-Vorlage mit einer Variablen für die Skript-Tags. Ich benutze https://github.com/alanshaw/grunt-include-replace , um diese Variable zu füllen. Im Dev-Modus stammt diese Variable aus einem Globbing-Muster aller meiner JS-Dateien. Die Überwachungsaufgabe berechnet diesen Wert neu, wenn eine JS-Datei hinzugefügt oder entfernt wird.
Um im Entwicklungs- oder Produktmodus unterschiedliche Ergebnisse zu erzielen, füllen Sie diese Variable einfach mit einem anderen Wert. Hier ist ein Code:
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
jsSrcFileArrayist Ihr typisches Grunzmuster. jsScriptTagsnimmt das jsSrcFileArrayund verkettet sie zusammen mit scriptTags auf beiden Seiten. destPathist das Präfix, das ich für jede Datei haben möchte.
Und so sieht HTML aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Wie Sie in der Konfiguration sehen können, generiere ich den Wert dieser Variablen als fest codiertes scriptTag, wenn sie im prodModus ausgeführt wird. Im Dev-Modus wird diese Variable auf einen Wert wie den folgenden erweitert:
<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>
Lassen Sie mich wissen, wenn Sie Fragen haben.
PS: Dies ist eine verrückte Menge an Code für etwas, das ich in jeder clientseitigen JS-App tun möchte. Ich hoffe, jemand kann daraus ein wiederverwendbares Plugin machen. Vielleicht werde ich eines Tages.