Глоток - новая горячка среди веб-разработчиков. Для тех, кто не знает, что такое Gulp, это просто система сборки. Gulp может облегчить вашу жизнь, управляя повторяющимися задачами за вас. Кривая обучения gulp довольно мала по сравнению с Grunt, который также является средством выполнения задач и выполняет те же функции, что и Gulp. Gulp и grunt следуют модульному подходу. И gulp, и grunt имеют множество плагинов. Плагины Gulp можно найти здесь.
Чтобы использовать gulp, у вас должен быть npm (менеджер пакетов узлов), который поставляется с NodeJs .
После установки Node и npm используйте следующий код для глобальной установки gulp:
$ npm install -g gulp
Если вы используете Ubuntu, вы, вероятно, захотите использовать
$ sudo npm install -g gulp
Обычно gulp можно запустить из командной строки с помощью команды «gulp». Обычно в корневом каталоге проекта сохраняется файл gulp, который называется gulpfile.js.
Этот файл запускается, когда мы запускаем команду «gulp». Gulp использует термин задача для каждой конкретной функции, выполняемой им. Когда вы запускаете команду gulp, она выполняет задачу по умолчанию.
Gulpfile состоит из 4 основных частей. Объявление зависимости, именованные задачи, задачи наблюдения и задача по умолчанию. Часть объявления зависимостей определяет модули, от которых зависит наш gulpfile. Поскольку gulp использует этот модульный подход, каждый модуль должен быть установлен / загружен с помощью npm. Раздел объявления зависимостей выглядит так,
Используя require, модули gulp импортируются в gulpfile.js.
Именованные задачи объявляются с помощью метода gulp.task, который принимает два параметра: первый параметр - это имя задачи, а второй - функция обратного вызова, которая выполняет конкретную задачу, например минификацию.
Задача минимизации, которая определена на рисунке выше, демонстрирует, как мы можем минимизировать файлы JavaScript в папке модулей. Здесь используются подстановочные знаки, а расширение .js используется для отслеживания всех файлов JavaScript в каталоге модулей. Функция конвейера - это встроенная функция gulp, аналогичная функции конвейера в UNIX. В качестве аргументов канала мы можем передать функции, которые нам нужно выполнить, например ngAnnotate (ngAnnotate используется для минимизации файлов AngularJs). gulp.dest указывает целевой каталог.
Следующий раздел используется для объявления задач наблюдения. Эти задачи чрезвычайно полезны, когда речь идет об автоматизации, которую можно получить с помощью задач наблюдения.
Как следует из названия, задача наблюдения наблюдает за файлами, указанными в методе наблюдения, и когда происходит какое-либо изменение, выполняются задачи, переданные второму параметру.
Последний раздел содержит значение по умолчанию. Это означает, что когда мы запускаем gulp, что должно произойти. Это похоже на именованную задачу, но вместо имени первым параметром должно быть значение default.
Что ж, это то, что вам нужно, чтобы начать работу с gulp.
Заключение
Gulp чрезвычайно полезен, когда дело касается автоматизации.
Кривая обучения gulp мала по сравнению с grunt. Таким образом, любой может легко быстро настроить собственную систему сборки.
