Создание таска или задачи

Для начала работы, нам необходимо руками создадать файл 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