Gulp: старый и новый синтаксис написания тасков

Дневник разработчика

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

    Теперь же мы будем усложнять и пришло время разобраться в чем именно отличия нового синтаксиса от старого.

    В новом синтаксисе, начиная с GULP 4 версии, при программировании тасков стала применяться деструктуризация

    Деструктуризация (destructuring assignment) – это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.

    В старом синтаксисе перед началом написания программ – тасков, мы подключали модуль gulp в файле gulpfile.js со всеми его методами.

    А в новом синтаксисе, подключаем не весь объект целиком, а лишь нужные нам методы этого объекта. Мы как бы деструктурируем. И подключённые методы присваиваем переменным с соответствующими именами.

    Примеры кода можно увидеть на сайте https://gulpjs.com/docs/en/api/watch

    Gulp: старый и новый синтаксис написания тасков

    Соответственно при объявлении переменной в начале нашего gulpfile.js мы деструктурируем объект gulp по средствам конструкции в фигурных скобках. Внутри скобок мы перечисляем через запятую все используемые в наших тасках методы gulp.

    /* Было так */
    const gulp = require('gulp');
    /* А стало так */
    const { task, dest, watch, series} = require('gulp');

    Все таски/задания для сборки проекта можно оформлять как отдельные программы, или как функции.

    Для начала давайте оформим как отдельные программы, так как это почти так же, как мы делали при старом синтаксисе:

    1. При написании программы мы не обращаемся к объекту gulp и начинаем сразу с оператора task
    2. Типичные функции теперь заменяем на стрелочные
    3. Упрощаем написание тасков за счёт удаления упоминания gulp

    В итоге наша программа претерпевает следующие модификации

    Gulp: старый и новый синтаксис написания тасков
    Gulp: старый и новый синтаксис написания тасков
    /* Старый синтаксис gulp  */
    const gulp = require('gulp');
    
    gulp.task('copy', function () {
      return gulp.src('./src/**/*.html').pipe(gulp.dest('./build/'));
    })
    
    gulp.watch('./src/*.html', gulp.series('copy'));
    
    gulp.task('default', gulp.series('copy'));
    
    /* новый синтаксис gulp  */
    const { task, src, dest, watch, series} = require('gulp');
    
    task('copy', ()=>{
      return src('./src/**/*.html')
      .pipe(dest('./build/'));
    });
    
    watch('./src/*.html', series('copy'));
    
    task('default', series('copy'));
    

    Важно учитывать, что при добавлении методов, используемых в тасках, нам нужно добавить их в блоке подключения методов и объявления переменных (в начале файла gulpfile.js)

    Вы, наверное, подумали, что это всё? А вот и нет!

    Полученную в итоге программу в новом синтаксисе можно сделать еще более современной, на манер примеров на официальном сайте https://gulpjs.com/docs/en/getting-started/quick-start#result

    Gulp: старый и новый синтаксис написания тасков

    Из примера мы видим, что таски больше не регистрируются. Мы видим, что у нас описывается функция с таском по умолчанию (defaultTask)

    И далее эта функция экспортируется как единый блок кода в модуль default. В этот блок кода собираются все зависимости, которые упоминаются в функции!

    Что такое модуль — модуль инкапсулирует единый код в единый блок кода. Создание модуля может быть интерпретировано как перемещение всех связанных функций в файл.

    И как в итоге это работает?

    Мы просто вводим команду запуска «gulp»

    Команда запускает таск по умолчанию запускает блок кода «default»

    А это значит, что мы запускаем наш «defaultTask»

    И таск в свою очередь запускает написанную ранее функцию с нашими тасками.

    Если же мы хотим запустить не такс по умолчанию, а несколько отдельных тасков, то запись будет выглядеть немного иначе:

    Gulp: старый и новый синтаксис написания тасков

    Итоговая часть с готовым кодом

    По итогу моих изысканий понял следующее:

    был старый добрый код:

    /* Старый синтаксис gulp  */
    const gulp = require('gulp');
    
    gulp.task('copy', function () {
      return gulp.src('./src/**/*.html').pipe(gulp.dest('./build/'));
    })
    
    gulp.watch('./src/*.html', gulp.series('copy'));
    gulp.task('default', gulp.series('copy'));

    Ему на смену пришёл новый код, который стал короче, появились стрелочные функции и деструктуризация:

    /* новый синтаксис gulp  */
    const { task, src, dest, watch, series} = require('gulp');
    
    task('copy', ()=>{
      return src('./src/**/*.html')
      .pipe(dest('./build/'));
    });
    
    watch('./src/*.html', series('copy'));
    task('default', series('copy'));

    И даже его можно сделать короче и красивей при помощи современного синтаксиса:

    // самый современный вариант синтаксиса 
    const { src, dest, watch, series } = require('gulp');
    
    function copy (){
      return src('./src/**/*.html')
        .pipe(dest('./build/'));
    }
    
    watch('./src/*.html', series(copy));
    exports.default = series(copy);

    Юрий Ронин