Пусть Grunt включает различные файлы Javascript в разработку и производство

Question

Я пробую Grunt и у меня есть вопрос о включении файлов JavaScript в dev и более поздних стадиях. Для пояснения: минимизация, конкатенация и т. Д. Здесь не проблема - просто вывод / замена.

На этапе разработки я хочу включить отдельные библиотеки и файлы javascript - для отладки, возможно, просто потому, что я делал это все время, и почему-то мне не нравится, когда они объединяются в dev. Итак, я хочу следующий вывод в моем HTML-файле при разработке:

<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...

А затем для производства или постановки я хотел бы получить ворчливый вывод:

<script src="js/all-files-in-one.js"></script>

Как добиться этого самым простым способом?

Answer 1

Возможно, вы захотите взглянуть на плагин grunt-usemin ( https://github.com/yeoman/grunt-usemin). Вот простой пример.

По сути, если у меня есть несколько javascript-файлов, которые я хочу объединить в один файл (или наборы javascript-файлов, которые я хочу объединить в отдельные файлы для каждого набора), я могу поместить теги сценария, которые ссылаются на эти файлы, внутри блоков "build".

<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->

<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->

Теперь, когда я запускаю сборку grunt, которая включает в себя задачи 'useminPrepare' и 'usemin', эти теги сценария в моем index.html будут заменены следующим:

<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>

Пример и документы объясняют, как вы можете настроить это и использовать его для других ресурсов, таких как css.