Buradaki çözümleri beğenmedim ( daha önce verdiğim çözümler dahil ) ve neden:
- En yüksek oyu alan sorunun yanıtı , bir JS dosyası eklediğinizde / yeniden adlandırdığınızda / sildiğinizde komut dosyası etiketleri listesini el ile eşitlemeniz gerektiğidir.
- Kabul edilen yanıtla ilgili sorun , JS dosyaları listenizde kalıp eşleşmesinin bulunamamasıdır. Bu, Gruntfile'da elle güncellemeniz gerektiği anlamına gelir.
Bu sorunların her ikisini de nasıl çözeceğimizi anladım. Grunt görevimi her dosya eklendiğinde veya silindiğinde, komut dosyası etiketlerinin otomatik olarak bunu yansıtacak şekilde oluşturulacağı şekilde ayarladım. Bu şekilde, JS dosyalarınızı eklediğinizde / kaldırdığınızda / yeniden adlandırdığınızda html dosyanızı veya grunt dosyanızı değiştirmeniz gerekmez .
Nasıl çalıştığını özetlemek için, komut dosyası etiketleri için bir değişken ile bir html şablonu var. Bu değişkeni doldurmak için https://github.com/alanshaw/grunt-include-replace kullanıyorum . Dev modunda, bu değişken tüm JS dosyalarımın globbing modelinden geliyor. İzleme görevi bir JS dosyası eklendiğinde veya kaldırıldığında bu değeri yeniden hesaplar.
Şimdi, dev veya prod modunda farklı sonuçlar elde etmek için, bu değişkeni farklı bir değerle doldurmanız yeterlidir. İşte bazı kod:
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
jsSrcFileArraytipik homurdanma dosya-globbing modelinizdir. jsScriptTagsalır jsSrcFileArrayve scripther iki taraftaki etiketlerle birleştirir . destPathher dosyada istediğim ön ek.
HTML şu şekilde görünür:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Şimdi, yapılandırmada görebileceğiniz gibi, bu değişkenin değerini sabit kodlu bir scriptetiket olarak üretiyorum prod. Dev modunda, bu değişken şöyle bir değere genişler:
<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>
Herhangi bir sorunuz varsa bize bildirin.
Not: Bu, her istemci tarafı JS uygulamasında yapmak istediğim bir şey için çılgın bir kod miktarı. Umarım birisi bunu yeniden kullanılabilir bir eklentiye dönüştürebilir. Belki bir gün yapacağım.