Когда я писал эту статью, еще не было релиза Gulp'а и обновиться было не так то просто. Сейчас это делается одной командой и можно не устраивать пляски с бубном:
npm install gulp@next
Вообще сейчас есть три варианта установки:
npm install gulp@next
- четвертая версияnpm install gulpjs/gulp#v4.0.0-alpha.3
- как понятно из команды v4.0.0-alpha.3npm install gulp
- устанавливает версию 3! на май 2018 это v3.9.1Gulp это крутой сборщик, умеющий компилировать SCSS, Less, SVG спрайты и еще кучу всего полезного.
Некоторое время команда gulpJS работала над четвертой версией проекта. Это версия имеет много новых приятных возможностей, но некоторые функции не имеют обратной совместимости. Апгрейд достаточно простой, но все равно требует некоторых манипуляций.
Хорошая новость в том, что Вы можете обновить и протестировать новую версию на конкретном проекте без изменения всех ваших Gulp файлов. Это идеальный вариант, если нужно понять что может новая версия, но вы пока не готовы сжечь все мосты))
Вам придется обновить глобальный пакет до версии 4, но версия 3 все еще будет работать для каждого локального проекта, где это необходимо.
Для начала нужно удалить текущий глобальный пакет 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 для локального проекта.
$ 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.js. Самый простой способ это запустить Gulp и исправить появившиеся ошибки.
Возможно, Вы увидите что-то подобное: at Object.
Это говорит нам о том, что ошибка вызвана в 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 возвращал путь измененного файла внутри функции в которой был вызван. Например, на выходе для примера ниже это будет объект с директорией измененного файла и событием (например, 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
});
});