Non mi piacciono le soluzioni qui (inclusa quella che ho precedentemente fornito ) ed ecco perché:
- Il problema con la risposta più votata è che è necessario sincronizzare manualmente l'elenco dei tag di script quando si aggiunge / rinomina / elimina un file JS.
- Il problema con la risposta accettata è che il tuo elenco di file JS non può avere una corrispondenza del modello. Questo significa che devi aggiornarlo manualmente nel Gruntfile.
Ho capito come risolvere entrambi questi problemi. Ho impostato il mio compito grunt in modo che ogni volta che un file viene aggiunto o eliminato, i tag di script vengono generati automaticamente per riflettere quello. In questo modo, non è necessario modificare il file html o il file grunt quando si aggiungono / rimuovono / rinominano i file JS.
Per riassumere come funziona, ho un modello html con una variabile per i tag di script. Uso https://github.com/alanshaw/grunt-include-replace per popolare quella variabile. In modalità dev, quella variabile proviene da un modello sconvolgente di tutti i miei file JS. L'attività di controllo ricalcola questo valore quando viene aggiunto o rimosso un file JS.
Ora, per ottenere risultati diversi in modalità dev o prod, devi semplicemente popolare quella variabile con un valore diverso. Ecco un po 'di codice:
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è il tipico schema grugnito di file. jsScriptTagsprende il jsSrcFileArraye li concatena insieme ai scripttag su entrambi i lati. destPathè il prefisso che desidero su ogni file.
Ed ecco come appare l'HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Ora, come puoi vedere nella configurazione, genera il valore di quella variabile come scripttag hard coded quando viene eseguito in prodmodalità. In modalità dev, questa variabile si espanderà a un valore come questo:
<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>
Fatemi sapere se avete domande.
PS: Questa è una quantità folle di codice per qualcosa che vorrei fare in ogni app JS sul lato client. Spero che qualcuno possa trasformarlo in un plugin riutilizzabile. Forse un giorno lo farò.