gulp - это набор инструментов JavaScript с открытым исходным кодом, созданный Эриком Шоффстоллом [5], используемый в качестве системы потоковой сборки (похожей на более ориентированную на пакеты Make ) во интерфейсной веб-разработке .
Автор (ы) оригинала | Эрик Шоффстолл |
---|---|
Разработчики) | Блейн Бублиц, Эрик Шоффстолл |
Первый выпуск | 26 сентября 2013 г . [1] |
Стабильный выпуск | 4.0.2 / 6 мая 2019 г . [2] |
Репозиторий | github |
Написано в | JavaScript |
Операционная система | Linux , macOS , Windows |
Платформа | Node.js |
Тип | Инструментарий |
Лицензия | Лицензия MIT [3] [4] |
Веб-сайт | gulpjs |
Это средство выполнения задач, построенное на Node.js и npm , используемое для автоматизации трудоемких и повторяющихся задач, связанных с веб-разработкой, таких как минификация , конкатенация, очистка кеша, модульное тестирование , линтинг , оптимизация и т. Д. [6]
gulp использует подход "код вместо конфигурации" для определения своих задач и полагается на свои небольшие одноцелевые плагины для их выполнения. Экосистема gulp включает более 3500 таких плагинов. [7]
Обзор
gulp [8] - это инструмент сборки в JavaScript, построенный на потоках узлов . Эти потоки облегчают соединение файловых операций через конвейеры . [9] gulp читает файловую систему и передает данные из одного специализированного плагина в другой через .pipe()
оператора, выполняя одну задачу за раз. Исходные файлы не изменяются, пока не будут обработаны все плагины. Его можно настроить как на изменение исходных файлов, так и на создание новых. Это дает возможность выполнять сложные задачи, связывая его многочисленные плагины. Пользователи также могут писать свои собственные плагины для определения своих собственных задач. [10] В отличие от других исполнителей задач, которые запускают задачи по конфигурации, gulp требует знания JavaScript и программирования для определения своих задач. gulp - это система сборки, которая означает, что помимо выполнения задач, она также способна копировать файлы из одного места в другое, компилировать , развертывать , создавать уведомления, модульное тестирование, линтинг и т. д. [5]
Нужен исполнитель задач
Средства выполнения задач, такие как gulp и Grunt , построены на Node.js, а не на npm , потому что базовые сценарии npm неэффективны при выполнении нескольких задач. Несмотря на то, что некоторые разработчики предпочитают сценарии npm, потому что они могут быть простыми и легкими в реализации, существует множество способов, в которых gulp и Grunt имеют преимущество друг перед другом и скриптами, предоставляемыми по умолчанию. [11] Grunt запускает задачи, преобразовывая файлы и сохраняя их как новые во временных папках, а вывод одной задачи используется как ввод для другой и так далее, пока вывод не достигнет папки назначения. Это включает в себя множество вызовов ввода-вывода и создание множества временных файлов. В то время как gulp проходит через файловую систему и не требует ни одного из этих временных местоположений, уменьшая количество вызовов ввода-вывода, тем самым улучшая производительность. [12] Grunt использует файлы конфигурации для выполнения задач, тогда как gulp требует, чтобы его файл сборки был закодирован. В Grunt каждый плагин необходимо настроить так, чтобы его входное расположение соответствовало выходным данным предыдущего плагина. В gulp плагины автоматически распределяются по конвейеру. [9]
Операция
Задачи gulp запускаются из оболочки интерфейса командной строки (CLI) [11] и требуют двух файлов, package.json
которые используются для перечисления различных подключаемых модулей для gulp, и gulpfile.js
(или просто gulpfile
). Они, согласно соглашению с инструментами сборки, являются часто находится в корневом каталоге исходного кода пакета. Файл gulpfile содержит большую часть логики, необходимой gulp для выполнения задач сборки. Сначала загружаются все необходимые модули, а затем в gulpfile определяются задачи. Все необходимые плагины, указанные в gulpfile, перечислены в разделе devDependencies в [13]. Задача по умолчанию запускается $gulp
. Отдельные задачи могут быть определены с помощью gulp.task и выполняются им gulp
. [14] Сложные задачи определяются путем связывания плагинов с помощью .pipe()
оператора. [15]
Анатомия gulpfile
gulpfile - это место, где все операции определены в gulp. Базовая анатомия gulpfile состоит из необходимых плагинов, включенных вверху, определения задач и задачи по умолчанию в конце. [16]
Плагины
Любой установленный плагин, необходимый для выполнения задачи, должен быть добавлен в начало файла gulp как зависимость в следующем формате. [14] [15]
// Добавление зависимостей var gulp = require ( 'gulp' );
Задачи
Затем можно создавать задачи. Задача gulp определяется gulp.task и принимает имя задачи в качестве первого параметра и функцию в качестве второго параметра.
В следующем примере показано создание задач gulp. Первый параметр taskName является обязательным и указывает имя, под которым задача в оболочке может быть выполнена. [17]
глоток . task ( 'taskName' , function () { // что-то делаем });
В качестве альтернативы можно создать задачу, которая выполняет несколько предопределенных функций. Эти функции передаются вторым параметром в виде массива.
function fn1 () { // что-то делаем }function fn2 () { // что-то делаем }// Задача с массивом имён функций gulp . Задача ( 'TaskName' , глотка . параллельный ( fn1 , Fn2 ));
Задача по умолчанию
Задача по умолчанию должна быть определена в конце gulpfile. Его можно запустить gulp
командой в оболочке. В приведенном ниже случае задача по умолчанию ничего не делает. [15]
// Задача Gulp по умолчанию gulp . задача ( 'по умолчанию' , fn );
Задача по умолчанию используется в gulp для автоматического запуска любого количества зависимых подзадач, определенных выше в последовательном порядке. gulp также может отслеживать исходные файлы и запускать соответствующую задачу при внесении изменений в файлы. Подзадачи следует указать как элементы массива во втором параметре. Процесс можно запустить, просто запустив задачу по умолчанию по gulp
команде. [16]
Примеры задач
Изображение Задача
Определение модуля может быть в начале Gulpfile.js
вот так:
var imagemin = require ( 'gulp-imagemin' );
Последующая задача изображения оптимизирует изображения. gulp.src()
извлекает все изображения с расширением .png, .gif или .jpg из каталога ' images-orig /'.
.pipe(imagemin())
каналы найденные изображения в процессе оптимизации и с .pipe(gulp.dest())
оптимизированными изображениями сохраняются в папке ' images /' . Без них gulp.dest()
изображения действительно были бы оптимизированы, но не сохранялись. [18] Поскольку оптимизированные изображения сохраняются в другой папке, исходные изображения остаются неизменными. [15]
// Задача изображений gulp . task ( 'images' , function () { return gulp . src ( 'images / *. {png, gif, jpg}' ) . pipe ( imagemin ()) . pipe ( gulp . dest ( 'dist / images /' )). ); });
Скрипты Задача
В следующем примере все файлы JavaScript из каталога scripts / оптимизированы .pipe(uglify())
и gulp.dest('scripts/')
заменяют исходные файлы выходными данными. [19] Для этого нужно сначала вернуться к требуемому плагину gulp-uglify [20] в установщике пакета npm и в начале gulpfile , модуль должен быть определен.
// Задача скрипта gulp . задача ( 'сценарии' , функция () { вернуть gulp . src ( 'сценарии / *. js' ) . pipe ( uglify ()) . pipe ( gulp . dest ( 'scripts /' )); });
Посмотреть задачу
Задача Watch служит для реагирования на изменения в файлах. В следующем примере задачи с именами scripts и images вызываются при изменении любого из файлов или изображений JavaScript в указанных каталогах. [21]
// Повторно запускаем задачу при изменении файла gulp . задача ( 'смотреть' , функция ( cb ) { gulp . watch ( 'скрипты / js / **' , скрипты ); gulp . watch ( 'images / **' , images ); cb (); });
Кроме того, можно выполнить обновление содержимого браузера с помощью задач Watch. [22] Для этого существует множество опций и плагинов.
Смотрите также
- Grunt (программное обеспечение)
Рекомендации
- ^ «Дата выпуска версии 1.0.0» . Проверено 31 декабря 2020 .
- ^ «Релизы · gulpjs / gulp» . Проверено 31 декабря 2020 .
- ^ "ЛИЦЕНЗИОННЫЙ файл на GitHub" . Проверено 31 декабря 2020 .
- ^ «Лицензионное поле от gulp - npm» . Проверено 31 декабря 2020 .
- ^ а б Джед Мао; Максимилиан Шмитт; Томаш Стрыевски; Кэри Кантри Холт; Уильям Любельски (2014). Разработка Gulp Edge (1-е изд.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
- ^ "Строительство с глотком - Smashing Magazine" . Smashingmagazine.com . Проверено 14 декабря 2016 .
- ^ "Реестр плагинов gulp.js" . Gulpjs.com . Проверено 14 декабря 2016 .
- ^ "глоток / глоток" . GitHub . Проверено 22 сентября 2016 .
- ^ а б "Подстек / поток-справочник: как писать программы узла с потоками" . GitHub . Проверено 14 декабря 2016 .
- ^ "глоток / глоток" . GitHub . Проверено 22 сентября 2016 .
- ^ а б "глоток / глоток" . GitHub . Проверено 23 сентября 2016 .
- ^ «Глоток для начинающих» . CSS-хитрости. 2015-09-01 . Проверено 14 декабря 2016 .
- ^ "установить | npm Documentation" . docs.npmjs.com . Проверено 22 сентября 2016 .
- ^ а б "глоток / глоток" . GitHub . Проверено 23 сентября 2016 .
- ^ а б в г Мейнард, Трэвис (2015). Начало работы с Gulp . Packt Publishing Ltd. ISBN 9781784393472.
- ^ а б «Введение в Gulp.js - SitePoint» . 2014-02-10 . Проверено 23 сентября 2016 .
- ^ "gulp / API.md в 4.0 · gulpjs / gulp · GitHub" . GitHub. 2016-05-12 . Проверено 14 декабря 2016 .
- ^ "Durchstarten mit Gulp.js - Оптимизация веб-сайтов, автоматизация Arbeitsabläufe" . Magazin.phlow.de . 2014-05-25 . Проверено 14 декабря 2016 .
- ^ «Интерфейсный рабочий процесс с Gulp - Лихтенекер» . Liechtenecker.at . 2015-05-29 . Проверено 14 декабря 2016 .
- ^ «глоток-углифы» . Npmjs.com . Проверено 14 декабря 2016 .
- ^ "глоток-смотреть" . Npmjs.com . Проверено 23 сентября 2016 .
- ^ «Browsersync + Gulp.js» . Browsersync.io . Проверено 14 декабря 2016 .
Литература
- Джед Мао; Максимилиан Шмитт; Томаш Стрыевски; Кэри Кантри Холт; Уильям Любельски (2014). Разработка Gulp Edge (1-е изд.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
- Ден Оделл (2014). «Инструменты сборки и автоматизация». Профессиональное кодирование, возможности и инструменты для разработки на JavaScript . Апресс. ISBN 978-1-4302-6268-8.
- Мейнард, Трэвис (2015). Начало работы с Gulp . Packt Publishing Ltd. ISBN 9781784393472.
Внешние ссылки
- Официальный веб-сайт
- gulp на GitHub