Совет по 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, а также не забудьте, когда он будет готов, поделиться им с остальными;)

МИР!