Что такое Gulp? Установка и создание Gulp задач

Gulp – это менеджер задач, использование которого позволяет автоматизировать большинство рутинных процессов, с которыми вы столкнетесь при разработке. Как правило, подразумевают веб-разработку, но жестких ограничений на применение Gulp нет. Позже я постараюсь рассмотреть несколько примеров использования данного таск-менеджера вне контекста веб-приложений или даже вне контекста разработки. Тем не менее, когда вы будете слышать что-либо о Gulp, с большой долей вероятности можно говорить, что речь пойдет о фронтенде.

Следует учесть, что сам по себе Gulp практически ничего не делает. Вся его сила заключена в огромном количестве плагинов, взаимодействием которых Gulp управляет исходя из заданных вами правил. На момент написания этого материала, на официальном сайте говорится о существовании без малого 4 000 плагинов.

Установка Gulp

Для работы Gulp необходимо наличие Node.js и npm. Установка выполняется из командной строки.

Создадим директорию для будущего проекта. Это можно сделать средствами файл менеджера, к которому вы привыкли, но я останусь в режиме командной строки.

Создаем директорию проекта и переходим в нее:

mkdir gulp-project
cd gulp-project

Глобально установим gulp-утилиту командной строки:

npm install --global gulp-cli

Инициируем файл package.json в директории проекта:

npm init

Локально устанавливаем Gulp

npm install --save-dev gulp

Конфигурируем Gulp c помощью gulpfile.js

Все, что вы хотите доверить работе Gulp, должно быть описано в gulpfile.js, который необходимо поместить рядом с package.json.

Следует понимать, что gulpfile это просто js файл, где вы можете писать любой JavaScript код и он будет выполняться с помощью nodejs. Главное, чтобы этот js код был зарегистрирован в качестве gulp задач, которые могут выполняться. Иными словами, даже не используя gulp плагины, можно в какой-то степени оптимизировать рабочие процессы.

Gulp позволяет регистрировать таски двумя способами, но я рассмотрю тот, который рекомендуется официальной документацией – через exports.

Пример простейшего таска:

function someTask(cb) {
  console.log('Some gulp task');
  cb();
}

exports.default = someTask

Gulp task – это функция, которая будет выполнена при вызове в качестве gulp задания. В нашем случае внутри функции мы просто бросаем запись в консоль. В конце работы вызываем callback cb(), что сообщает менеджеру о завершении работы задачи. Функцию экспортируем в качестве gulp-таска с именем default. Имя, разумеется, может быть любое.

Запустим задачу default консольной командой:

gulp default

Вызов может быть осуществлен вручную (консольной командой), может быть инициирован в IDE (многие IDE имеют интеграцию с Gulp), либо таск можно вызвать по событию изменения какого-то файла.

Я добавлю еще две задачи, создающие копии директорий, если в них были созданы/изменены файлы. Будь это реальный проект, такими директориями могли бы оказаться директории с изображениями и шрифтами верстки, которые необходимо скопировать в production версию.

Я создал две директории внутри текущей рабочей: ./fonts и ./images. Их содержимое должно быть скопировано, например, в ./dist/fonts и ./dist/images соответственно.

Пока gulpfile.js изменился следующим образом:

const gulp = require('gulp');

function copyImages() {
  return gulp.src('./images/**/*')
      .pipe(gulp.dest('./dist/images'));
}

function copyFonts() {
  return gulp.src('./fonts/**/*')
      .pipe(gulp.dest('./dist/fonts'));
}

exports.copyImages = copyImages;
exports.copyFonts = copyFonts;
exports.copy = gulp.parallel(copyImages, copyFonts)

В первой строке импортируется gulp, что позволит использовать его API. Затем создаются две функции, которые экспортируются в виде трех задач. По одной на каждую функцию, плюс одна общая задача, запустив которую, gulp выполнит сразу обе функции, причем сделает это не последовательно, а параллельно, что должно снизить общее время копирования, если файлов в директориях будет много.

В функциях нет вызова cb(); он не требуется в том случае, если мы возвращаем объект, с которым работаем.

Осталось написать watcher.

Настройка Gulp watcher

В файл добавлена еще одна функция, внутри которой, с помощью вызова gulp.watch(), происходит установка наблюдателя на директорию. В качестве второго параметра передается таск, который должен быть вызван, если наблюдатель зарегистрировал изменения в директории.

function watcher(cb) {
  gulp.watch('./images/**/*', gulp.parallel(copyImages));
  gulp.watch('./fonts/**/*', gulp.parallel(copyFonts));
  cb();
}

Функцию также регистрируем в качестве таска:

exports.watcher = gulp.parallel(watcher);

Теперь можно запустить watcher командой:

gulp watcher

Вывозы gulp.watch() можно было не заворачивать в функцию, но тогда они срабатывали бы при запуске абсолютно любой gulp-задачи. Если в вашем файле всего одна задача, то это может быть удобно.

Итоговые содержимое файла gulpfile.js:

const gulp = require('gulp');

function copyImages() {
  return gulp.src('./images/**/*')
      .pipe(gulp.dest('./dist/images'));
}

function copyFonts() {
  return gulp.src('./fonts/**/*')
      .pipe(gulp.dest('./dist/fonts'));
}

function watcher(cb) {
  gulp.watch('./images/**/*', gulp.parallel(copyImages));
  gulp.watch('./fonts/**/*', gulp.parallel(copyFonts));
  cb();
}

exports.copyImages = copyImages;
exports.copyFonts = copyFonts;
exports.copy = gulp.parallel(copyImages, copyFonts);
exports.watcher = gulp.parallel(watcher);

В заключении

Как уже, наверное, стало понятно, Gulp не является чем-то революционным. До его появления упомянутые задачи решались bash скриптингом, cron’ом и прочими утилитами, доступными в любой операционной системе. Но Gulp и другие таск-манеджеры смогли предложить более простое и изящное решение.

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