Совет по Gulp: подключение Gulp Inject
Итак, вот что: SPA (одностраничное приложение) - это текущая тенденция, и создание их с использованием новейших технологий, безусловно, будет означать более модульный код, а модульный код также означает несколько файлов, обычно сотни из них, и если вы AngularJS разработчик, вы наверняка будете осознавать боль создания этого уродливого тега <script>
каждый раз, когда вы создаете новый контроллер службы.
Лично для меня ответ довольно прост: подключить инструмент сборки, который автоматизирует этот процесс для меня, и моя жизнь не казалась проще, чем сегодня, так что вот уловка, позволяющая инструменту сборки делать именно это.
Что за инструмент для сборки?
Технически говоря, современные инструменты сборки - это просто вспомогательные подключаемые мини-программы, которые значительно упрощают нашу жизнь, поскольку мы находимся в контексте Javascript, у нас на самом деле есть пара вариантов, gulp
и grunt
, и их работа отлично работает. , но в наши дни люди используют Gulp из-за его скорости и рабочего режима, так как он использует streams
, чтобы заставить трюк работать, и, черт возьми, это быстро.
1 - Настройка рабочего окружения:
Нам нужно установить Gulp-Cli
в нашей системе, используя следующую команду, используя наш системный Терминал:
$ npm i --g gulp-cli
Теперь наша система полностью настроена для использования Gulp.
2 - Настройка локального проекта:
Для того, чтобы Gulp работал в нашем проекте, нам нужно установить gulp local.
$ npm install --save-dev gulp
Теперь нам нужен специальный файл javascript с именем gulpfile.js
.
Зачем мне это делать?
Хорошо, помните подключаемые аспекты инструментов сборки? эти плагины необходимо настроить, и gulpfile.js
сделает именно это!
Хватит бла-бла, покажи мне КОД!
Ладно, тогда! наша система полностью настроена, давайте скачаем волшебный плагин!
$ npm install --save-dev gulp-inject
Теперь идите прямо в свой gulpfile.js
файл и запишите следующее:
Теперь, чтобы предыдущая логика работала, нам нужно добавить несколько комментариев на нашу страницу index.html, например:
Теперь посмотрите на эти специальные комментарии? <!-- inject:css --> <!-- endinject -->
и <!-- inject:js --> <!-- endinject -->
- это наши заполнители, куда будет вставлен путь к нашему файлу, каждый со своим удобным местом, поэтому файл JavaScript будет находиться под тегом script
, а файлы CSS - под тегом link
.
Как я могу выполнить сейчас?
Просто вернитесь к своему терминалу и просто нажмите следующую команду:
$ gulp
Теперь помните, что мы помещаем все в default task
и в нашу рабочую папку проекта, выполнение команды gulp без чего-либо еще заставит default task
выполняться так просто!
Помните, вы можете выполнять любые задачи, требующие автоматизированного процесса, так что без ограничений, вы также можете создать свой собственный плагин Gulp, а также не забудьте, когда он будет готов, поделиться им с остальными;)
МИР!