Как перейти на Gulp.js 4.0

Как перейти на Gulp.js 4.0

От автора: сегодняшняя статья посвящена Gulp 4, изменения в котором могут поначалу озадачить разработчиков. Несмотря на конкуренцию со стороны webpack и Parcel, Gulp.js остается одним из самых популярных исполнителей задач JavaScript. Gulp.js настраивается с использованием кода, что делает его универсальным вариантом общего назначения. Наряду с обычным переносом, упаковкой и интерактивной перезагрузкой, Gulp.js может анализировать базу данных, отображать статический сайт, выдавать коммиты Git и публиковать сообщение Slack с помощью одной команды.

Gulp.js 4.0

Gulp.js 3.x используется по умолчанию около десяти лет. До недавнего времени команда npm install gulp устанавливала версию 3.9.1 — версию, которая рассматривалась в предыдущем руководстве.

Gulp.js 4.0 был доступен в течение всего этого времени, но его нужно было явно установить с помощью npm install gulp@next. Отчасти это было связано с продолжающейся разработкой и тем, что файлы конфигурации Gulp.js 4 не совместимы с файлами, разработанными для версии 3.

10 декабря 2018 года Gulp.js 4.0 был объявлен версией по умолчанию и опубликован в npm. Любой, кто использует npm install gulp для нового проекта, получит версию 4.

Необходимо ли переходить на Gulp.js 4?

Нет. Gulp.js 3 устарел и вряд ли получит дальнейшие обновления, но его все еще можно использовать. Существующие проекты не будут обновляться, если версия явно не изменена в разделе dependencies файла package.json. Например:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Вы также можете установить Gulp.js 3 в новых проектах, используя:

Возможно, лучше придерживаться Gulp.js 3.x, если у вас очень сложная, критически важная система сборки. Однако существующие плагины Gulp.js должны быть совместимы, и большинство конфигураций можно перенести за час или два. Обновление в тоже время имеет ряд важных преимуществ, которые мы рассмотрим в этой статье.

Обновление до Gulp.js 4.0

Обновите зависимости package.json, как показано выше, затем запустите npm install. Вы также можете обновить интерфейс командной строки с помощью npm i gulp-cli-g. Чтобы проверить установку, введите в командной строке :gulp -v:

Миграция gulpfile.js

Выполнение любой задачи теперь может вызывать пугающие ошибки. Например:

Это неприятно, но вы можете игнорировать все, кроме первой ссылки, которая показывает строку, где произошла ошибка (в этом примере — 102).

К счастью, большинство из этих ошибок вызваны тем же типом проблемы. В следующих разделах в качестве примера используется код из руководства по задачам CSS. Код доступен на GitHub и предоставляет оригинальный Gulp.js 3 gulpfile.js и перенесенный эквивалент Gulp.js 4.

Преобразование массивов задач в вызовы series()

Gulp.js 3 позволял указывать массивы синхронных задач. Это обычно использовалось, когда вызывалось событие watch или у задачи были зависимости. Например, запустите задачу images перед задачей css:

Gulp.js 4.0 представляет методы series() and parallel() для объединения задач:

series(…) запускает задачи по одной в указанном порядке, а

parallel(…) выполняет задачи одновременно в любом порядке.

Сложные задачи могут быть вложены в любой уровень, чего было бы трудно достичь в Gulp.js 3. Например, запускать задачи a и b параллельно, а, когда обе завершены, запускать параллельно задачи c и d:

Приведенную выше задачу css можно перенести в Gulp.js 4, изменив массив на вызов метода series():

Асинхронное завершение

Gulp.js 3 разрешал синхронные функции, но они могли вносить ошибки, которые было трудно отлаживать. Рассмотрим задачи, которые не возвращают потоковое значение gulp. Например, задача clean удаляет папку build:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Gulp.js 4.0 выдает предупреждение, потому что ему нужно знать, когда задача завершена, чтобы управлять последовательностями series() и parallel():

Чтобы решить эту проблему, Gulp.js 4 принимает возвращаемый Promise (который поддерживается пакетом del):

В качестве альтернативы, вы можете передать функцию обратного вызова, которая выполняется по завершении ( del также предоставляет синхронный метод sync()):

Вот более сложный пример Gulp.js 3 с задачами наблюдения:

Они могут быть перенесены в метод Gulp.js 4 series() и обратный вызов done():

Дополнительный совет: преобразование методов задач в модули ES6

Большинство конфигураций будет работать в Gulp.js 4.0 после преобразования массивов задач в вызовы series() и завершения сигналов асинхронных функций.

Хотя метод определения task() все еще поддерживается, новый шаблон модуля ES6 exports предлагает несколько преимуществ:

Можно определить частные задачи, которые можно вызывать внутри gulpfile.js, но не из команды gulp.

Функции могут передаваться по ссылке, а не по имени строки, поэтому синтаксические ошибки могут быть выделены редакторами.

На одну и ту же функцию можно ссылаться, используя любое количество имен задач.

Проще определить сложные зависимости в series() и / или parallel().

Рассмотрим следующие задачи Gulp.js 3 images и css:

Они могут быть преобразованы для использования шаблона модуля Gulp.js 4:

Примечание: операторы return должны быть добавлены, потому что функции стрелок ES6 => с неявным возвратом были заменены на определения стандартных функций. В этом примере Gulp.js 4:

для выполнения задачи images() могут быть использованы либо gulp images, либо gulp pics

либо gulp images, либо gulp pics будет запускать images() следом за css()

Задайте exports.default для определения задачи по умолчанию, запускаемой при выполнении gulp из командной строки без конкретной задачи.

Потребовалось некоторое время, чтобы (правильно) все выстроить, но Gulp.js 4 предоставляет возможности для определения задач, которые были бы недостижимы в версии 3. Обновление программного обеспечения может показаться пустой тратой усилий по разработке, но вы будете вознаграждены большей скоростью, более надежным набором задач, что сэкономит вам время в долгосрочной перспективе.

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий