Tôi không thích các giải pháp ở đây (bao gồm cả giải pháp tôi đã đưa ra trước đây ) và đây là lý do:
- Vấn đề với câu trả lời được bình chọn cao nhất là bạn phải đồng bộ hóa thủ công danh sách các thẻ script khi bạn thêm / đổi tên / xóa tệp JS.
- Vấn đề với câu trả lời được chấp nhận là danh sách các tệp JS của bạn không thể có khớp mẫu. Điều này có nghĩa là bạn phải cập nhật nó bằng tay trong Gruntfile.
Tôi đã tìm ra cách giải quyết cả hai vấn đề này. Tôi đã thiết lập tác vụ lẩm cẩm của mình để mỗi khi một tệp được thêm hoặc xóa, các thẻ script sẽ tự động được tạo để phản ánh điều đó. Theo cách này, bạn không cần phải sửa đổi tệp html hoặc tệp grunt của mình khi bạn thêm / xóa / đổi tên tệp JS của mình.
Để tóm tắt cách thức hoạt động, tôi có một mẫu html với một biến cho các thẻ script. Tôi sử dụng https://github.com/alanshaw/grunt-include-replace để điền vào biến đó. Trong chế độ dev, biến đó xuất phát từ một mẫu toàn cầu của tất cả các tệp JS của tôi. Tác vụ theo dõi tính toán lại giá trị này khi một tệp JS được thêm hoặc xóa.
Bây giờ, để có được kết quả khác nhau trong chế độ dev hoặc prod, bạn chỉ cần nhập biến đó với một giá trị khác. Đây là một số mã:
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
jsSrcFileArraylà mô hình tập tin grunt điển hình của bạn. jsScriptTagslấy jsSrcFileArrayvà ghép chúng lại với nhau bằng scriptcác thẻ ở cả hai bên. destPathlà tiền tố tôi muốn trên mỗi tệp.
Và đây là HTML trông như thế nào:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Bây giờ, như bạn có thể thấy trong cấu hình, tôi tạo giá trị của biến đó dưới dạng scriptthẻ được mã hóa cứng khi nó chạy ở prodchế độ. Trong chế độ dev, biến này sẽ mở rộng thành một giá trị như thế này:
<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>
Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi.
PS: Đây là một lượng mã điên rồ cho một thứ gì đó tôi muốn làm trong mọi ứng dụng JS phía máy khách. Tôi hy vọng ai đó có thể biến điều này thành một plugin có thể tái sử dụng. Có lẽ tôi sẽ có một ngày.