No me gustan las soluciones aquí (incluida la que di anteriormente ) y he aquí por qué:
- El problema con la respuesta más votada es que debe sincronizar manualmente la lista de etiquetas de script cuando agrega / renombra / elimina un archivo JS.
- El problema con la respuesta aceptada es que su lista de archivos JS no puede tener coincidencia de patrones. Esto significa que debe actualizarlo a mano en el Gruntfile.
He descubierto cómo resolver estos dos problemas. He configurado mi tarea gruñona para que cada vez que se agregue o elimine un archivo, las etiquetas de script se generen automáticamente para reflejar eso. De esta manera, no necesita modificar su archivo html o su archivo de gruñido cuando agrega / elimina / renombra sus archivos JS.
Para resumir cómo funciona, tengo una plantilla html con una variable para las etiquetas de script. Yo uso https://github.com/alanshaw/grunt-include-replace para llenar esa variable. En el modo de desarrollo, esa variable proviene de un patrón global de todos mis archivos JS. La tarea de observación recalcula este valor cuando se agrega o elimina un archivo JS.
Ahora, para obtener resultados diferentes en modo dev o prod, simplemente llene esa variable con un valor diferente. Aquí hay un código:
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
jsSrcFileArrayes tu típico patrón gruñido de gruñido jsScriptTagstoma el jsSrcFileArrayy los concatena junto con scriptetiquetas en ambos lados. destPathes el prefijo que quiero en cada archivo.
Y así es como se ve el HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Ahora, como puede ver en la configuración, genero el valor de esa variable como una scriptetiqueta codificada cuando se ejecuta en prodmodo. En modo dev, esta variable se expandirá a un valor como este:
<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>
Hazme saber si tienes alguna pregunta.
PD: Esta es una cantidad loca de código para algo que me gustaría hacer en cada aplicación JS del lado del cliente. Espero que alguien pueda convertir esto en un complemento reutilizable. Quizás lo haga algún día.