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

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

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

 gulp.task('css', ['images'], () => gulp.src(cssConfig.src) // .other plugins .pipe(gulp.dest(cssConfig.build)); ); 

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

• series(...) запускает задачи по одной в указанном порядке, и
• parallel(...) запускает задачи одновременно в любом порядке.

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

 gulp.series( gulp.parallel(a, b), gulp.parallel(c, d) ) 

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

 gulp.task('css', gulp.series('images', () => gulp.src(cssConfig.src) // .other plugins .pipe(gulp.dest(cssConfig.build)); )); // remember the extra closing bracket! 

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

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

 const gulp = require('gulp'), del = require('del'), dir = { src : 'src/', build : 'build/' }; gulp.task('clean', () => { del([ dir.build ]); }); 

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

 [15:57:27] Using gulpfile gulpfile.js [15:57:27] Starting 'clean'... [15:57:27] The following tasks did not complete: clean [15:57:27] Did you forget to signal async completion? 

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

 gulp.task('clean', () => { return del([ dir.build ]); }); // or use the simpler implicit return: // gulp.task('clean', () => del([ dir.build ]) ); 

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

 gulp.task('clean', (done) => { del.sync([ dir.build ]); done(); }); 

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

 gulp.task('default', ['css', 'server'], () => { // image changes gulp.watch(imgConfig.src, ['images']); // CSS changes gulp.watch(cssConfig.watch, ['css']); }); 

Их можно перенести в методы Gulp.js 4 series() и обратный вызов done() :

 gulp.task('default', gulp.series('css', 'server', (done) => { // image changes gulp.watch(imgConfig.src, gulp.series('images')); // CSS changes gulp.watch(cssConfig.watch, gulp.series('css')); done(); })); 

Бонусный совет: конвертируйте методы задач в модули ES6

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

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

1. Можно определить частные задачи, которые можно вызывать в gulpfile.js но не из команды gulpfile.js .
2. Функции могут передаваться по ссылке, а не по имени строки, поэтому синтаксические ошибки могут быть выделены редакторами.
3. На одну и ту же функцию можно ссылаться, используя любое количество имен задач.
4. Проще определять сложные зависимости в series() и / или parallel() .

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

 gulp.task('images', () => gulp.src(imgConfig.src) // .other plugins .pipe(gulp.dest(imgConfig.build)) ); gulp.task('css', ['images'], () => gulp.src(cssConfig.src) // .other plugins .pipe(gulp.dest(cssConfig.build)) ); 

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

 function images() { return gulp.src(imgConfig.src) // .other plugins .pipe(gulp.dest(imgConfig.build)); } exports.images = images; exports.pics = images; function css() { return gulp.src(cssConfig.src) // .other plugins .pipe(gulp.dest(cssConfig.build)); } exports.css = gulp.series(images, css); exports.styles = exports.css; 

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

В этом примере Gulp.js 4:

• либо gulp images либо gulp pics могут быть использованы для запуска задачи images()
• либо gulp styles gulp css или gulp styles запускают images() а затем css() .

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

Глоток Боже

Пример задач CSS , который оптимизирует изображения, компилирует Sass, минимизирует CSS и обновляет изменения при внесении изменений, занял менее одного часа для преобразования. Изучите код на GitHub, чтобы увидеть:

• оригинальный Gulp.js 3 gulpfile.js , и
• перенесенный Gulp.js 4 gulpfile.js .

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