Gulp 4: Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких

Краткое руководство по переходу на gulp 4 | Автор Jhey Tompkins

Что мне нужно знать? Каково влияние?

·

·

Новая версия gulp уже здесь. Что вам, , нужно знать ? Ваш gulpfile сломается?

В журнале изменений для [email protected] перечислены различные изменения. Большинство не ломаются. Основное кардинальное изменение — введение gulp.series и gulp.parallel .

Прежде чем идти дальше, спасибо Gulp за то, что он поделился этим руководством в Твиттере 🐦!

Для тех, кто в лагере TL;DR — незначительное влияние. Ваши задачи сломаются, если они используют параметр списка для определения зависимостей задач. Однако это не огромный рефакторинг, чтобы вернуть все в рабочее состояние. Вы можете увидеть суть использования [email protected] ниже, а вот ссылка на шаблон gulp с использованием gulp@4. 0 .

Это большое изменение. Кажется, были предприняты большие усилия, чтобы обеспечить больший контроль над выполнением задач 🛂

Всегда параллельно или в цепочке ⛓

В предыдущих версиях gulp мы могли передать параметр списка задаче. Это определит набор задач, которые будут выполняться перед этой задачей.

 gulp.task('a', ['b', 'c'], function () { // сделать что-то}) 

В этом примере задача a зависит от задач b и c запускать до того как будет. Задачи b и c будут выполняться параллельно. У вас нет контроля над их порядком выполнения, если вы не создадите цепочку;

 gulp.task('a', ['c'], function () { // делаем что-то}) 
 gulp.task('c', ['b'], function () { // делаем что-то} ) 

Это обеспечивает следующий порядок b , затем c , затем a . Если вам нужно связать задачи в цепочку, это может скоро запутаться. Метаданные задач и хорошие документы могут помочь, но не будет ли намного проще иметь что-то вроде;

 gulp.task('a', series(['b', 'c']), function () { // сделать что-то}) 

Это почти то, что вы получаете с [email protected] 🎉

Новички в блоке

 gulp.series() 
 gulp.parallel() 

Довольно интуитивно понятно. Параметр списка устарел 👢

Если мы посмотрим на наш первый пример;

 gulp.task('a', ['b', 'c'], function () { // сделать что-то }) 

Чтобы преобразовать это для [email protected]

 gulp.task('a' , gulp.series(gulp.parallel('b', 'c'), function () { 
 // сделай что-нибудь 
 })) 

Если вы переходите на [email protected] и еще этого не сделали, вы, вероятно, захотите прекратить использование анонимных функций. Они печатают при запуске и не очень полезны при просмотре метаданных задачи. Если вы не использовали метаданные задачи, я рекомендую это сделать. Вы можете прочитать об этом здесь.

Вы можете изменить это на

 gulp.task('a', gulp.series(gulp.parallel('b', 'c'), function a () { 
 // сделать что-то 
 })) 

Но чтобы было еще лучше 👍

 var a = function () { // что-то делаем } 
 gulp.task('a', gulp.series(gulp.parallel(b, c), a)) 

Или лучше

 var a = gulp.series(gulp.parallel(b, c), a) 
 module.exports = { a:a } 

Да, это действительно работает. Вы можете экспортировать функций как задачи. Это не относится к [email protected] , но если вы переключаетесь, почему бы не попробовать что-то новое? Вы можете увидеть больше на экспорта в качестве задач здесь.

Я бы заменил переменную на объявление . Хотя это все равно будет работать через подъем.

 var doStuff = gulp.series(gulp.parallel(b, c), a) 
 module.exports = { doStuff: doStuff } 

Пойдем немного дальше. Скорее всего, вы используете более новый синтаксис JavaScript через babel и т. д.0048 export const doStuff = gulp.series(gulp.parallel(b, c), a)

Это аккуратно 😎

Если вы не возражаете, остальные примеры будут использовать более новый стиль синтаксиса 👍

Верно, вернуться к [email protected] . Новый API побуждает вас больше думать о фактической структуре ваших задач сборки. Он также поддерживает более мелкие комплексные задачи, которые обеспечивают большую гибкость при внесении изменений.

Реальный пример

Рассмотрим реальный вариант использования.

Обычной задачей по умолчанию является что-то вроде develop . Возможно, когда-то это выглядело так:

 gulp.task('develop', ['serve', 'watch']) 

Должно быть понятно, что делают эти задачи;

• serve — обслуживает активы на локальном статическом сервере
• watch — следит за всем исходным кодом и запускает компиляцию при изменении

Это имеет смысл запускать в parallel

Пример использования серии ? Вполне вероятно, что задача serve захочет скомпилировать активы перед обслуживанием. Что-то вроде

 const compileAssets = gulp.parallel([compileScript, compileStyle]) 
 const startServer = () => { // magic } 
 const serve = gulp.series(compileAssets, startServer) 
 export { serve } 

Миграция to [email protected] должно быть довольно просто. Документация хорошая, и есть много ресурсов, которые помогут вам, если вы застряли. Я оставил несколько ссылок ниже и пример суть с использованием нового синтаксиса. Вы также можете проверить шаблон gulp , используя [email protected] здесь 👍🤓

Как всегда, любые вопросы или предложения, пожалуйста, не стесняйтесь оставлять ответ или чирикать мне 🐦!

Некоторые ссылки

• Экспорт в виде задач — Gulp на Github
• Метаданные пользовательских задач — Gulp на Medium

Суть

✉️ Подписаться на 902 21 CodeBurst’s один раз в неделю Email Blast , 🐦 Следите за CodeBurst на Twitter , просмотр 🗺️ 900 15 Дорожная карта для веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .

Учебник: Node 12 LTS + Gulp 4 + VS2019 | Тристрам Толлидей

Как срывать пластырь. Больно, но стоит потери волос.

Тристрам Толлидей

 доступен список nvm 

 nvm install 12.13.0 
 // сделайте себе cuppanvm use 12.13.0