Как обновить Gulp до версии 4?

Когда я писал эту статью, еще не было релиза Gulp'а и обновиться было не так то просто. Сейчас это делается одной командой и можно не устраивать пляски с бубном:

npm install gulp@next

Вообще сейчас есть три варианта установки:

npm install gulp@next - четвертая версия
npm install gulpjs/gulp#v4.0.0-alpha.3 - как понятно из команды v4.0.0-alpha.3
npm install gulp - устанавливает версию 3! на май 2018 это v3.9.1

Gulp это крутой сборщик, умеющий компилировать SCSS, Less, SVG спрайты и еще кучу всего полезного.

Некоторое время команда gulpJS работала над четвертой версией проекта. Это версия имеет много новых приятных возможностей, но некоторые функции не имеют обратной совместимости. Апгрейд достаточно простой, но все равно требует некоторых манипуляций.

Обновление Gulp v4

Хорошая новость в том, что Вы можете обновить и протестировать новую версию на конкретном проекте без изменения всех ваших Gulp файлов. Это идеальный вариант, если нужно понять что может новая версия, но вы пока не готовы сжечь все мосты))

Вам придется обновить глобальный пакет до версии 4, но версия 3 все еще будет работать для каждого локального проекта, где это необходимо.

Глобальная установка Gulp v4

Для начала нужно удалить текущий глобальный пакет Gulp перед установкой новой версии.

Знак $ означает, что команды надо выполнять в консоли и писать его не надо.

$ npm rm -g gulp
$ npm install -g gulp-cli

Эти команды удалят текущую версию и установят v4 из ветки gulp-cli 4.0

Убедитесь, что первая команда не вызвала никаких ошибок при выполнении. Только после этого запускайте следующую. В зависимости от Вашей операционной системы, возможно, Вам потребуется вводить sudo, чтобы выполнить команду под Администратором.

Чтобы проверить какая версия установлена глобально, запустите следующую команду:

$ gulp -v
CLI version 1.2.1

Если Вы откроете консоль в папке проекта, то под строкой CLI version будет указана локальная версия.

Локальная установка gulp 4

После глобальной установки, нужно установить gulp для локального проекта.

$ npm uninstall gulp --save-dev
$ npm install gulpjs/gulp.git#4.0 --save-dev

Подобно установке глобального пакета, удаляем локальную версию и устанавливаем v4.

Если в вашем packaje.json gulp перечислен под dependencies, замените флаг --save-dev на --save.

Теперь Вы имеете установленный и готовый к работе gulp v4. Это можно проверить запустив команду gulp -v

$ gulp -v
CLI version 1.2.1
Local version 4.0.0-alpha.2

Обновление gulpfile

После того, как мы все установили, нужно внести некоторые изменения в на gulpfile.js. Самый простой способ это запустить Gulp и исправить появившиеся ошибки.

Возможно, Вы увидите что-то подобное: at Object. /Sites/gulp-v4/gulpfile.js:418:6

Это говорит нам о том, что ошибка вызвана в gulpfile.js на строке 418, символ 6.

Далее мы рассмотрим некоторые ошибки и пути их устранения.

Ошибка о которой я упомянул выше была вызвана в куске кода:

gulp.task('default', ['del'], function() {
    // default task code here
});

Таск del был вызван перед таском default

Для устранение этой проблемы, надо запустить их последовательно с помощью метода series

gulp.task('default', gulp.series('del', function() { 
    // default task code here
}));

Поскольку Вы открыли круглую скобку перед функцией, не забудьте её закрыть после функции.

Убедитесь, что Вы обновили остальную часть файла по этому примеру.

В четвертой версии появился синтаксис, который позволяет определять порядок запуска задач. Также можно запустить задачи параллельно с помощью gulp.parallel.

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

Ошибка следующая:

The following tasks did not complete: default, del
Did you forget to signal async completion?

Эта ошибка возникает при использовании анонимной функции (та, которая вызывается после del в примере).

Решается передачей параметра в функцию и запуска его после выполнения задачи.

Например:

gulp.task('default', gulp.series(function(cb) {    
    // task code here
    cb();
}));

Gulp watcher с событиями change и пути к файлам

В третьей версии Gulp, watcher возвращал путь измененного файла внутри функции в которой был вызван. Например, на выходе для примера ниже это будет объект с директорией измененного файла и событием (например, changed).

gulp.task('watch', function(){
    gulp.watch('path/to/css/*.css').on('change', function(event) {
        console.log(event.path);
        console.log(event.type);
        // code to execute
    });
});

Watcher может запускать некоторые стандартные функции, но если нужен доступ к имени файла, нужно переписать функцию.

gulp.task('watch', function(){
    gulp.watch('path/to/css/*.css')
    .on('change', function(path, stats) {
        console.log(path);
        // code to execute on change
    })
    .on('unlink', , function(path, stats) {
        console.log(path);
        // code to execute on delete
    });
});