Создание таска или задачи
Для начала работы, нам необходимо руками создадать файл gulpfile.js
и начать его заполнение.
Подключаем Gulp
к проекту. В фигурных скобках мы указываем, все необходимые свойства, которые будем использовать. Для этого напишем следующий код:
gulpfile.jsconst {src, dest, parallel, series, watch} = require("gulp");
src()
выполняет чтение исходных файловdest()
выполняет запись итоговых файловparallel()
объединяет задачи для выполнения в параллельном режимеseries()
объединяет задачи для выполнения в последовательном режимеwatch()
запускает необходимые задачи при изменениях в файлах
Теперь Gulp
подключен к нашему проекту. Далее, мы будем подключать все необходимые плагины для Gulp
.
Задача по умолчанию, пубоичная задача
Чтобы выполнять задачу output
командой gulp
, сделаем нашу функцию задачей по умолчанию, присвоив default
:
gulpfile.jsfunction output(cb) {
console.log("Привет, Gulp!");
cb();
}
exports.default = output;
Альтернативная запись
gulpfile.jsconst gulp = require("gulp");
function output(cb) {
console.log("Привет, Gulp!");
cb();
}
gulp.task('default', output);
Выполнение задачи
Чтобы запустить задачу, теперь нужно выполнить команду из консоли gulp
:
gulp
Обычная задача, приватная задача
Создадим простейшую задачу, которая будет выводить строку «Привет, Gulp!». output
имя функции задачи, оно может быть любым:
gulpfile.jsfunction output(cb) {
console.log("Привет, Gulp!");
cb();
}
exports.output = output;
Альтернативная запись
Альтернативная запись без exports
:
gulpfile.jsconst gulp = require("gulp");
function output(cb) {
console.log("Привет, Gulp!");
cb();
}
gulp.task(output);
Альтернативная запись
Альтернативная запись через task
:
gulpfile.jsconst gulp = require("gulp");
gulp.task("output", function output(cb) {
console.log("Привет, Gulp!");
cb();
})
Выполнение задачи
Чтобы запустить задачу, нужно выполнить команду из консоли gulp название_задачи
. В нашем случае команда будет следующей:
gulp output
Объяснение что такое cb
Вы наверняка обратили внимание на то, что в функцию с задачей параметром попадает функция-коллбэк cb()
, которая должна быть вызвана в конце задачи, это делается для того, чтобы уведомить Gulp о завершении задачи и возможности приступать к следующей задаче.
В боевом примере за место cb()
мы используем return
который что то возврашает в функцию:
function task(cb) {
return src('src/styles.css'); // return вместо вызова cb
}
Просмотр задач
Чтобы просмотреть задачи, которые вы можете выполнить, используйте следующую команду:
gulp --tasks