Gulp.js - Gulp.js

глоток
Gulp.js Logo.svg
Разработчики)Эрик Шоффстолл
изначальный выпуск26 сентября 2013 г.; 7 лет назад (2013-09-26)[1]
Стабильный выпуск
4.0.2 / 6 мая 2019; 19 месяцев назад (2019-05-06)[2]
Репозиторий
Отредактируйте это в Викиданных
ПлатформаКроссплатформенность
Доступно вJavaScript
ТипИнструментарий
ЛицензияЛицензия MIT[3]
Интернет сайтgulpjs.com Отредактируйте это в Викиданных

глоток является Открытый исходный код JavaScript инструментарий, созданный Эриком Шоффстоллом[4] используется как потоковое система сборки (похоже на более ориентированный на пакеты Делать ) в интерфейсная веб-разработка.

Это бегун задач, построенный на Node.js и npm, используется для автоматизации трудоемких и повторяющихся задач, связанных с веб-разработкой, таких как минификация, конкатенация, очистка кеша, модульное тестирование, линтинг, оптимизация и др.[5]

gulp использует подход «код поверх конфигурации» для определения своих задач и полагается на свои небольшие одноцелевые плагины для их выполнения. Экосистема gulp включает более 3500 таких плагинов.[6]

Обзор

глоток[7] это инструмент сборки на JavaScript, основанный на потоки узлов. Эти потоки облегчают подключение файловых операций через трубопроводы.[8] gulp читает файловую систему и передает данные из одного специализированного плагина в другой через .трубка() оператор, выполняющий одну задачу за раз. Исходные файлы не изменяются, пока не будут обработаны все плагины. Его можно настроить как на изменение исходных файлов, так и на создание новых. Это дает возможность выполнять сложные задачи за счет связывания многочисленных плагинов. Пользователи также могут писать свои собственные плагины для определения своих задач.[9] В отличие от других исполнителей задач, которые запускают задачи по конфигурации, gulp требует знания JavaScript и программирования для определения своих задач. gulp - это система сборки, которая означает, что помимо выполнения задач, она также способна копировать файлы из одного места в другое, составление, развертывание, создание уведомлений, модульное тестирование, линтинг и т. д.[4]

Нужен исполнитель задач

Task-runners, такие как gulp и Ворчание построены на Node.js, а не npm, потому что базовые сценарии npm неэффективны при выполнении нескольких задач, хотя некоторые разработчики предпочитают npm сценарии, поскольку они могут быть простыми и легкими для реализации, существует множество способов, в которых gulp и Grunt имеют преимущество друг перед другом и скриптами, предоставленными по умолчанию.[10] Grunt запускает задачи, преобразовывая файлы и сохраняя их как новые во временных папках, а вывод одной задачи используется как ввод для другой и так далее, пока вывод не достигнет папки назначения. Это включает в себя множество Ввод / вывод вызовы и создание множества временных файлов. В то время как gulp проходит через файловую систему и не требует ни одного из этих временных местоположений, уменьшая количество вызовов ввода-вывода, тем самым улучшая производительность.[11] Grunt использует файлы конфигурации для выполнения задач, тогда как gulp требует, чтобы его файл сборки был закодирован. В Grunt каждый плагин необходимо настроить так, чтобы его входное расположение соответствовало выходным данным предыдущего плагина. В gulp плагины автоматически распределяются по конвейеру.[8]

Операция

Задачи gulp запускаются из Интерфейс командной строки (CLI)[10] оболочка и требуется два файла, package.json, который используется для перечисления различных плагинов для gulp, и gulpfile.js (или просто gulpfile), Они, согласно соглашению о средствах сборки, часто находятся в корневом каталоге исходного кода пакета. Файл gulpfile содержит большую часть логики, необходимой gulp для выполнения задач сборки. Сначала загружаются все необходимые модули, а затем в gulpfile определяются задачи. Все необходимые плагины, указанные в gulpfile, перечислены в разделе devDependencies файла[12] Задача по умолчанию запускается $ глоток. Отдельные задачи могут быть определены в gulp.task и выполняются gulp <задача> <другая задача>.[13] Сложные задачи определяются путем объединения плагинов с помощью .трубка() оператор.[14]

Анатомия gulpfile

gulpfile - это место, где все операции определены в gulp. Основная анатомия gulpfile состоит из необходимых плагинов, включенных вверху, определения задач и задачи по умолчанию в конце.[15]

Плагины

Любой установленный плагин, необходимый для выполнения задачи, должен быть добавлен в начало файла gulp в качестве зависимости в следующем формате.[13][14]

// Добавляем зависимостивар глоток = требовать ('глоток');

Задачи

После этого можно создавать задачи. Задача gulp определяется gulp.task и принимает имя задачи в качестве первого параметра и функцию в качестве второго параметра.

В следующем примере показано создание задач gulp. Первый параметр taskName является обязательным и указывает имя, под которым может выполняться задача в оболочке.[16]

глоток.задача('taskName', функция () {  //сделай что-нибудь});

В качестве альтернативы можно создать задачу, которая выполняет несколько предопределенных функций. Эти функции передаются вторым параметром в виде массива. 

функция fn1 () {  // сделай что-нибудь}функция fn2 () { // сделай что-нибудь}// Задача с массивом имён функцийглоток.задача('taskName', глоток.параллельно(fn1, fn2));

Задача по умолчанию

Задача по умолчанию должна быть определена в конце gulpfile. Это может быть запущено глоток команда в оболочке. В приведенном ниже случае задача по умолчанию ничего не делает.[14]

// Задача Gulp по умолчаниюглоток.задача('дефолт', fn);

Задача по умолчанию используется в gulp для автоматического запуска любого количества зависимых подзадач, определенных выше, в последовательном порядке. gulp также может отслеживать исходные файлы и запускать соответствующую задачу при внесении изменений в файлы. Подзадачи следует указать как элементы массива во втором параметре. Процесс можно запустить, просто запустив задачу по умолчанию с помощью глоток команда.[15]

Примеры задач

Изображение Задача

Определение модуля может быть в начале Gulpfile.js вот так:

вар imagemin = требовать('глоток-изображениемин');

Последующая задача изображения оптимизирует изображения. gulp.src () извлекает все изображения с расширением .png, .gif или .jpg в каталоге 'изображения-ориг / '.

.pipe (imagemin ()) направляет найденные изображения через процесс оптимизации и с .pipe (gulp.dest ()) оптимизированные изображения сохраняются в 'images / 'папка. Без gulp.dest () изображения действительно будут оптимизированы, но не сохранены.[17] Поскольку оптимизированные изображения сохраняются в другой папке, исходные изображения остаются неизменными.[14]

// Задача изображенийглоток.задача('изображений', функция () {    возвращаться глоток.src('images / *. {png, gif, jpg}')        .труба(imagemin())        .труба(глоток.dest('dist / images /'));});

Задача сценариев

В следующем примере все файлы JavaScript из каталога скрипты / оптимизированы с .pipe (uglify ()) и gulp.dest ('скрипты /') перезаписывает исходные файлы выходными данными.[18] Для этого нужно сначала вернуться к требуемому плагин gulp-uglify[19] на npm установщик пакетов и в начале gulpfile, модуль должен быть определен. 

// Задача скриптаглоток.задача('скрипты', функция () {    возвращаться глоток.src('скрипты / *. js')        .труба(уродовать())        .труба(глоток.dest('скрипты /'));});

Посмотреть задачу

Задача Watch служит для реагирования на изменения в файлах. В следующем примере задачи с именами скрипты и изображений вызываются при изменении любого из файлов или изображений JavaScript в указанных каталогах.[20]

// Повторно запускаем задачу при изменении файлаглоток.задача('смотреть', функция (cb) {    глоток.смотреть('скрипты / js / **', скрипты);    глоток.смотреть('изображений/**', изображений);    cb();});

Кроме того, можно выполнить обновление содержимого браузера с помощью задач Watch.[21] Для этого есть множество опций и плагинов.

Рекомендации

  1. ^ https://libraries.io/npm/gulp
  2. ^ "глоток изменений". Получено 2019-05-06.
  3. ^ «Лицензия на github.com». Получено 2016-05-30.
  4. ^ а б Джед Мао; Максимилиан Шмитт; Томаш Стрыевски; Кэри Кантри Холт; Уильям Любельски (2014). Разработка Gulp Edge (1-е изд.). Bleeding Edge Press. ISBN  978-1-939902-14-6.
  5. ^ "Building With Gulp - Smashing Magazine". Smashingmagazine.com. Получено 2016-12-14.
  6. ^ "реестр плагинов gulp.js". Gulpjs.com. Получено 2016-12-14.
  7. ^ "глоток / глоток". GitHub. Получено 2016-09-22.
  8. ^ а б "Подстек / поток-справочник: как писать программы узла с потоками". GitHub. Получено 2016-12-14.
  9. ^ "глоток / глоток". GitHub. Получено 2016-09-22.
  10. ^ а б "глоток / глоток". GitHub. Получено 2016-09-23.
  11. ^ «Глоток для начинающих». CSS-хитрости. 2015-09-01. Получено 2016-12-14.
  12. ^ "install | npm Documentation". docs.npmjs.com. Получено 2016-09-22.
  13. ^ а б "глоток / глоток". GitHub. Получено 2016-09-23.
  14. ^ а б c d Мейнард, Трэвис (2015). Начало работы с Gulp. Packt Publishing Ltd. ISBN  9781784393472.
  15. ^ а б «Введение в Gulp.js - SitePoint». 2014-02-10. Получено 2016-09-23.
  16. ^ "gulp / API.md в 4.0 · gulpjs / gulp · GitHub". GitHub. 2016-05-12. Получено 2016-12-14.
  17. ^ "Durchstarten mit Gulp.js - Оптимизация веб-сайтов, автоматизация Arbeitsabläufe". Magazin.phlow.de. 2014-05-25. Получено 2016-12-14.
  18. ^ «Интерфейсный процесс с Gulp - Лихтенекер». Liechtenecker.at. 2015-05-29. Получено 2016-12-14.
  19. ^ "глотнуть-углифить". Npmjs.com. Получено 2016-12-14.
  20. ^ "глоток-смотреть". Npmjs.com. Получено 2016-09-23.
  21. ^ "Browsersync + Gulp.js". Browsersync.io. Получено 2016-12-14.

Литература

  • Джед Мао; Максимилиан Шмитт; Томаш Стрыевски; Кэри Кантри Холт; Уильям Любельски (2014). Разработка Gulp Edge (1-е изд.). Bleeding Edge Press. ISBN  978-1-939902-14-6.
  • Ден Оделл (2014). «Инструменты сборки и автоматизация». Кодирование, возможности и инструменты для разработки на языке Pro JavaScript. Апресс. ISBN  978-1-4302-6268-8.
  • Мейнард, Трэвис (2015). Начало работы с Gulp. Packt Publishing Ltd. ISBN  9781784393472.

внешняя ссылка