Saya tidak suka solusi di sini (termasuk yang saya berikan sebelumnya ) dan inilah alasannya:
- Masalah dengan jawaban pilihan tertinggi adalah Anda harus menyinkronkan daftar tag skrip secara manual saat Anda menambah / mengganti nama / menghapus file JS.
- Masalah dengan jawaban yang diterima adalah bahwa daftar file JS Anda tidak dapat memiliki pencocokan pola. Ini artinya Anda harus memperbaruinya dengan tangan di Gruntfile.
Saya telah menemukan cara untuk menyelesaikan kedua masalah ini. Saya telah mengatur tugas kasar saya sehingga setiap kali file ditambahkan atau dihapus, tag skrip otomatis dihasilkan untuk mencerminkan hal itu. Dengan cara ini, Anda tidak perlu memodifikasi file html atau file mendengus Anda saat Anda menambah / menghapus / mengganti nama file JS Anda.
Untuk meringkas cara kerjanya, saya memiliki template html dengan variabel untuk tag skrip. Saya menggunakan https://github.com/alanshaw/grunt-include-replace untuk mengisi variabel itu. Dalam mode dev, variabel itu berasal dari pola globbing semua file JS saya. Tugas arloji menghitung ulang nilai ini ketika file JS ditambahkan atau dihapus.
Sekarang, untuk mendapatkan hasil berbeda dalam mode dev atau prod, Anda cukup mengisi variabel itu dengan nilai yang berbeda. Ini beberapa kode:
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
jsSrcFileArrayadalah pola menggumpal file grunt khas Anda. jsScriptTagsmengambil jsSrcFileArraydan menyatukannya dengan scripttag di kedua sisi. destPathadalah awalan yang saya inginkan pada setiap file.
Dan inilah tampilannya HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Sekarang, seperti yang Anda lihat di konfigurasi, saya menghasilkan nilai variabel itu sebagai scripttag berkode keras ketika dijalankan dalam prodmode. Dalam mode dev, variabel ini akan diperluas ke nilai seperti ini:
<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>
Beri tahu saya jika Anda memiliki pertanyaan.
PS: Ini adalah jumlah kode gila untuk sesuatu yang ingin saya lakukan di setiap aplikasi JS sisi klien. Saya harap seseorang dapat mengubah ini menjadi plugin yang dapat digunakan kembali. Mungkin suatu hari nanti.