gulp.js
 | В этой статье есть несколько проблем. Пожалуйста, помогите улучшить его или обсудите эти проблемы на странице обсуждения . ( Узнайте, как и когда удалять эти шаблонные сообщения )
|
 | |
| Оригинальный автор(ы) | Эрик Шоффстолл [1] |
|---|---|
| Разработчик(и) | Блейн Бублик, Эрик Шоффстолл |
| Первоначальный выпуск | 26 сентября 2013 г [2] |
| Стабильная версия | 5.0.0 / 29 марта 2024 г [3] |
| Репозиторий | github |
| Написано в | JavaScript |
| Операционная система | Linux , MacOS , Windows |
| Платформа | Node.js |
| Тип | Инструментарий |
| Лицензия | МОЯ лицензия [4] [5] |
| Веб-сайт | gulpjs  |
gulp — это с открытым исходным кодом набор инструментов JavaScript , используемый в качестве системы потоковой сборки (аналогично более ориентированной на пакеты Make ) при веб-разработке переднего плана .
Это средство запуска задач, созданное на Node.js и npm , используемое для автоматизации трудоемких и повторяющихся задач, связанных с веб-разработкой, таких как минификация , конкатенация, очистка кеша, модульное тестирование , анализ , оптимизация и т. д. [6]
gulp использует подход «код поверх конфигурации» для определения своих задач и полагается на свои небольшие специализированные плагины для их выполнения. Экосистема gulp включает более 3500 таких плагинов. [7]
Обзор
[ редактировать ]глоток [8] — это инструмент сборки на JavaScript, построенный на потоках узлов . Эти потоки облегчают соединение файловых операций через конвейеры . [9] gulp читает файловую систему и передает имеющиеся данные от одного специализированного плагина к другому через .pipe() оператор, выполняющий одну задачу за раз. Исходные файлы не затрагиваются до тех пор, пока не будут обработаны все плагины. Его можно настроить либо на изменение исходных файлов, либо на создание новых. Это дает возможность выполнять сложные задачи путем связывания многочисленных плагинов. Пользователи также могут писать свои собственные плагины для определения своих задач. [10] В отличие от других средств запуска задач, которые запускают задачи по конфигурации, gulp требует знания JavaScript и программирования для определения своих задач. gulp — это система сборки, которая означает, что помимо выполнения задач она также способна копировать файлы из одного места в другое, компилировать , развертывать , создавать уведомления, модульное тестирование, анализ и т. д. [1]
Нужен бегун задач
[ редактировать ]Обработчики задач, такие как 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, перечислены в разделе devDependities файла package.json. [13] Задача по умолчанию выполняется $gulp. Отдельные задачи могут быть определены с помощью gulp.task и выполняются gulp <task> <othertask>. [14] Сложные задачи определяются путем объединения плагинов с помощью .pipe() оператор. [15]
Анатомия gulpfile
[ редактировать ]gulpfile — это место, где все операции определяются в gulp. Базовая структура файла gulpfile состоит из необходимых плагинов, включенных вверху, определения задач и задачи по умолчанию в конце. [16]
Плагины
[ редактировать ]Любой установленный плагин, необходимый для выполнения задачи, должен быть добавлен в начало файла gulp в качестве зависимости в следующем формате. [14] [15]
//Adding dependenciesvar gulp = require ('gulp');Задачи
[ редактировать ]Затем можно создавать задачи. Задача gulp определяется gulp.task и принимает имя задачи в качестве первого параметра и функцию в качестве второго параметра.
В следующем примере показано создание задач gulp. Первый параметр TaskName является обязательным и указывает имя, под которым может быть выполнена задача в оболочке. [17]
gulp.task('taskName', function () { //do something});Альтернативно можно создать задачу, выполняющую несколько предопределенных функций. Эти функции передаются в качестве второго параметра в виде массива.
function fn1 () { // do something}function fn2 () { // do something}// Task with array of function namesgulp.task('taskName', gulp.parallel(fn1, fn2));Задача по умолчанию
[ редактировать ]Задача по умолчанию должна быть определена в конце gulpfile. Им может управлять gulp команда в оболочке. В приведенном ниже случае задача по умолчанию ничего не делает. [15]
// Gulp default taskgulp.task('default', 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]
// Images taskgulp.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 модуль должен быть определен.
// Script taskgulp.task('scripts', function () { return gulp.src('scripts/*.js') .pipe(uglify()) .pipe(gulp.dest('scripts/'));});Посмотреть задачу
[ редактировать ]Watch-задача служит для реагирования на изменения в файлах. В следующем примере задачи с именами скрипты и изображения вызываются при изменении любого из файлов или изображений JavaScript в указанных каталогах. [21]
// Rerun the task When a file changesgulp.task('watch', function (cb) { gulp.watch('scripts/js/**', scripts); gulp.watch('images/**', images); cb();});Кроме того, можно выполнить обновление содержимого браузера с помощью Watch-задач. [22] Для этого существует множество опций и плагинов.
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Перейти обратно: а б Джед Мао; Максимилиан Шмитт; Томаш Стриевский; Кэри Кантри Холт; Уильям Любельски (2014). Разработка Gulp Edge (1-е изд.). Пресс «Кровоточащая грань». ISBN 978-1-939902-14-6 .
- ^ «Дата выпуска версии 1.0.0» . Проверено 31 декабря 2020 г.
- ^ «Релизы · gulpjs/gulp» . Гитхаб . Проверено 31 декабря 2020 г.
- ^ «Файл ЛИЦЕНЗИИ на GitHub» . Гитхаб . Проверено 31 декабря 2020 г.
- ^ «Поле лицензии от gulp — npm» . Проверено 31 декабря 2020 г.
- ^ «Строительство с Gulp — потрясающий журнал» . Smashingmagazine.com . 11 июня 2014 года . Проверено 14 декабря 2016 г.
- ^ «Реестр плагинов gulp.js» . Gulpjs.com . Проверено 14 декабря 2016 г.
- ^ "gulpjs/глоток" . Гитхаб . Проверено 22 сентября 2016 г.
- ^ Перейти обратно: а б «Справочник по подстеку/потоку: как писать программы узлов с потоками» . Гитхаб . Проверено 14 декабря 2016 г.
- ^ "gulpjs/глоток" . Гитхаб . Проверено 22 сентября 2016 г.
- ^ Перейти обратно: а б "gulpjs/глоток" . Гитхаб . Проверено 23 сентября 2016 г.
- ^ «Глоток для начинающих» . CSS-трюки. 01.09.2015 . Проверено 14 декабря 2016 г.
- ^ «Установить | Документация npm» . docs.npmjs.com . Проверено 22 сентября 2016 г.
- ^ Перейти обратно: а б "gulpjs/глоток" . Гитхаб . Проверено 23 сентября 2016 г.
- ^ Перейти обратно: а б с д Мейнард, Трэвис (2015). Начало работы с Gulp . Packt Publishing Ltd. ISBN 9781784393472 .
- ^ Перейти обратно: а б «Введение в Gulp.js — SitePoint» . 10 февраля 2014 г. Проверено 23 сентября 2016 г.
- ^ «gulp/API.md в версии 4.0 · gulpjs/gulp · GitHub» . Гитхаб. 12 мая 2016 г. Проверено 14 декабря 2016 г.
- ^ «Начните работу с Gulp.js — оптимизируйте веб-сайты, автоматизируйте рабочие процессы» . Магазин.phlow.de . 25 мая 2014 г. Архивировано из оригинала 16 июня 2017 г. Проверено 14 декабря 2016 г.
- ^ «Внешний рабочий процесс с Gulp — Лихтенекер» . Liechtenecker.at . 29 мая 2015 г. Проверено 14 декабря 2016 г.
- ^ «глотать-уродовать» . Npmjs.com . Проверено 14 декабря 2016 г.
- ^ «глоток-часы» . Npmjs.com . Проверено 23 сентября 2016 г.
- ^ «Браузерсинк + Gulp.js» . Browsersync.io . Проверено 14 декабря 2016 г.
Литература
[ редактировать ]- Джед Мао; Максимилиан Шмитт; Томаш Стриевский; Кэри Кантри Холт; Уильям Любельски (2014). Разработка Gulp Edge (1-е изд.). Пресс «Кровоточащая грань». ISBN 978-1-939902-14-6 .
- Ден Оделл (2014). «Инструменты сборки и автоматизация». Программирование, возможности и инструменты для разработки на профессиональном JavaScript . Апресс. ISBN 978-1-4302-6268-8 .
- Мейнард, Трэвис (2015). Начало работы с Gulp . Packt Publishing Ltd. ISBN 9781784393472 .