Não gosto das soluções aqui (incluindo a que eu dei anteriormente ) e aqui está o porquê:
- O problema com a resposta mais votada é que você precisa sincronizar manualmente a lista de tags de script ao adicionar / renomear / excluir um arquivo JS.
- O problema com a resposta aceita é que sua lista de arquivos JS não pode ter correspondência de padrões. Isso significa que você precisa atualizá-lo manualmente no Gruntfile.
Eu descobri como resolver esses dois problemas. Configurei minha tarefa difícil para que, sempre que um arquivo for adicionado ou excluído, as tags de script sejam geradas automaticamente para refletir isso. Dessa forma, você não precisa modificar seu arquivo html ou grunt quando adicionar / remover / renomear seus arquivos JS.
Para resumir como isso funciona, tenho um modelo html com uma variável para as tags de script. Eu uso https://github.com/alanshaw/grunt-include-replace para preencher essa variável. No modo dev, essa variável vem de um padrão globbing de todos os meus arquivos JS. A tarefa de observação recalcula esse valor quando um arquivo JS é adicionado ou removido.
Agora, para obter resultados diferentes no modo dev ou prod, basta preencher essa variável com um valor diferente. Aqui está um 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
jsSrcFileArrayé o seu padrão típico de arquivo grunhido. jsScriptTagspega jsSrcFileArraye concatena-os juntamente com scriptetiquetas de ambos os lados. destPathé o prefixo que eu quero em cada arquivo.
E aqui está a aparência do HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Agora, como você pode ver na configuração, eu gero o valor dessa variável como uma scriptetiqueta codificada quando é executada no prodmodo. No modo dev, essa variável será expandida para um 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>
Deixe-me saber se você tiver alguma dúvida.
PS: Essa é uma quantidade louca de código para algo que eu gostaria de fazer em todos os aplicativos JS do lado do cliente. Espero que alguém possa transformar isso em um plugin reutilizável. Talvez eu vá algum dia.