Gulp: Как автоматически заменить миниатюрные файлы в html?

Question

В процессе разработки, как правило, я буду импортировать много сторонних LIBS моему HTML отдельно, как показано ниже:

<script src="/resource/jquery-validation-1.15.0/jquery.validate.js" type="text/javascript"></script> 
<script src="/resource/jquery-validation-1.15.0/localization/messages_en.min.js" type="text/javascript"></script> 
<script src="/resource/assets/js/publish.js" type="text/javascript"></script> 

Чтобы создать релиз ветки, я буду использовать Gulp для Минимизировать и Concat все разлученные файлы в один файл «min.js» для сохранения запросов HTTP и время нагрузки, как удар:

<script src="/resource/all.min.js" type="text/javascript"></script> 

Так моя трудность в том, что каждый раз, когда я должен вручную заменить этот отдельный импорт по уменьшенному одной стороны, это не большая проблема только для 1 или 2 страниц, однако, если у вас более 10 страниц, i t становится кошмаром, я считаю, что должен быть «правильный» способ справиться с этой проблемой, самым желанным способом является создание всего, запустив только сценарий Gulp.

Любые лучшие решения или предложения? или то, как я управляю своей веткой релиза, совершенно неверно?

Answer 1

Я думаю, у вас есть несколько вариантов.

• Получить общие библиотеки (например, jQuery) из CDN, которые часто бывают быстрее, и пользователи могут уже кэшировать их в своем браузере. Он также уменьшает размер вашего уменьшенного JS-файла и дает вам больше подключений к вашему веб-серверу, потому что эти ресурсы поступают из другого домена.
• Просто оставьте all.min.js ref в вашем html все время и запустите , чтобы пакет обновил каждый время, которое вы сохраняете. Когда вы готовы к развертыванию, выполните другую задачу prod, которая включает в себя минимизацию
• Оформить заказ gulp-useref или gulp-html-replace, чтобы на самом деле обновить html со ссылками на ваш связанный JS-файл. Возможно, вы захотите вывести эти обновленные html-файлы в другой каталог для развертывания.