Je n'aime pas les solutions ici (y compris celle que j'ai donnée précédemment ) et voici pourquoi:
- Le problème avec la réponse la plus votée est que vous devez synchroniser manuellement la liste des balises de script lorsque vous ajoutez / renommez / supprimez un fichier JS.
- Le problème avec la réponse acceptée est que votre liste de fichiers JS ne peut pas avoir de correspondance de modèle. Cela signifie que vous devez le mettre à jour à la main dans le Gruntfile.
J'ai compris comment résoudre ces deux problèmes. J'ai configuré ma tâche de grognement de sorte que chaque fois qu'un fichier est ajouté ou supprimé, les balises de script sont automatiquement générées pour refléter cela. De cette façon, vous n'avez pas besoin de modifier votre fichier html ou votre fichier grunt lorsque vous ajoutez / supprimez / renommez vos fichiers JS.
Pour résumer comment cela fonctionne, j'ai un modèle html avec une variable pour les balises de script. J'utilise https://github.com/alanshaw/grunt-include-replace pour remplir cette variable. En mode dev, cette variable provient d'un modèle de globalisation de tous mes fichiers JS. La tâche de surveillance recalcule cette valeur lorsqu'un fichier JS est ajouté ou supprimé.
Maintenant, pour obtenir des résultats différents en mode dev ou prod, il vous suffit de remplir cette variable avec une valeur différente. Voici du 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
jsSrcFileArrayest votre modèle de grognement de fichier grunt typique. jsScriptTagsprend le jsSrcFileArrayet les concatène avec des scriptétiquettes des deux côtés. destPathest le préfixe que je veux sur chaque fichier.
Et voici à quoi ressemble le HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Maintenant, comme vous pouvez le voir dans la configuration, je génère la valeur de cette variable sous forme de scriptbalise codée en dur lorsqu'elle est exécutée en prodmode. En mode dev, cette variable se développera à une valeur comme celle-ci:
<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>
Faites moi savoir si vous avez des questions.
PS: Ceci est une quantité folle de code pour quelque chose que je voudrais faire dans chaque application JS côté client. J'espère que quelqu'un pourra transformer cela en un plugin réutilisable. Peut-être que je le ferai un jour.