Мені тут не подобаються рішення (включаючи те, що я раніше давав ), і ось чому:
- Проблема з найбільш високою оцінкою відповіді полягає в тому, що вам потрібно вручну синхронізувати список тегів сценаріїв при додаванні / перейменуванні / видаленні файлу JS.
- Проблема з прийнятою відповіддю полягає в тому, що ваш список файлів JS не може відповідати шаблону. Це означає, що вам доведеться оновити його вручну в Gruntfile.
Я зрозумів, як вирішити обидва ці питання. Я налаштував своє завдання на грунт, щоб кожен раз, коли файл доданий чи видалявся, теги сценарію автоматично створюються для відображення цього. Таким чином, вам не потрібно змінювати ваш html-файл або грунт-файл під час додавання / видалення / перейменування файлів JS.
Підсумовуючи, як це працює, у мене є HTML-шаблон із змінною для тегів скрипту. Я використовую https://github.com/alanshaw/grunt-include-replace, щоб заповнити цю змінну. У режимі розроблення ця змінна походить від шаблону глобалізації всіх моїх файлів JS. Завдання перегляду перераховує це значення, коли додається або видаляється файл JS.
Тепер, щоб отримати різні результати в режимі dev або prod, ви просто заповнюєте цю змінну з іншим значенням. Ось код:
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є вашим типовим шахрайським файлом. jsScriptTagsприймає jsSrcFileArrayі поєднує їх разом з scriptтегами з обох сторін. destPath- це префікс, який я хочу отримати для кожного файлу.
А ось як виглядає HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
Тепер, як ви бачите в конфігурації, я генерую значення цієї змінної у вигляді жорстко кодованого scriptтегу, коли він працює в prodрежимі. У режимі розробки ця змінна розшириться до такого значення:
<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>
Повідомте мене, якщо у вас є питання.
PS: Це шалена кількість коду для того, що я хотів би зробити у кожному додатку JS на стороні клієнта. Я сподіваюся, що хтось може перетворити це на плагін для багаторазового використання. Можливо, я буду колись.