Создание конфигурационного файла Gulp

Для работы Gulp необходим специальный файл gulpfile.js, размещаемый в корневой папке проекта. В этом файле размещаются задачи для Gulp. Эти задачи представляют собой функции JavaScript.

Сначала объявляются основные свойства, которые Gulp использует при выполнении задач:

gulpfile.jsconst { src, dest, parallel, series, watch } = require('gulp');

• src() выполняет чтение исходных файлов
• dest() выполняет запись итоговых файлов
• parallel() объединяет задачи для выполнения в параллельном режиме
• series() объединяет задачи для выполнения в последовательном режиме
• watch() запускает необходимые задачи при изменениях в файлах

Далее таким же способом подключаются необходимые npm-модули, например:

gulpfile.jsconst sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');

Затем создаются рабочие задачи со следующей структурой:

• Указывается расположение исходных файлов
• При помощи оператора pipe() выстраивается последовательность выполнения операций
• Определяется место, куда будут сохраняться итоговые файлы

Чтобы к такой задаче можно было обратиться в любом месте gulpfile.js, ей обязательно присваивается своё название.

Задача task

Подготовим инструкцию для обработки файла стилей, созданных с использованием CSS-препроцессора SASS, для которой установим следующую последовательность действий:

1. Обратиться к исходному файлу в папке /src/styles/
2. Преобразовать синтаксис SASS в стандартный CSS
3. Вывести в терминале информацию о наличии ошибок в исходном файле
4. Сохранить итоговый файл в папку /public/styles/;
5. Применить с помощью модуля browser-sync новые стили для открытой в браузере страницы

До третьей версии Gulp задачи создавались встроенной функцией gulp.task():

gulpfile.jsgulp.task('styles', function() {
  return src('./src/styles/style.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(dest('./public/styles/style.css'))
  .pipe(browserSync.stream())
})

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

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

gulpfile.jsfunction styles() {
  return src('./src/styles/style.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(dest('./public/styles/style.css'))
  .pipe(browserSync.stream())
}

Формирование задачи с использованием такой функции создаёт инструкцию, которая доступна только для внутреннего использования. Чтобы объявленная функция могла взаимодействовать с рабочим окружением и выполняться командой gulp, её необходимо экспортировать в общедоступную задачу:

gulpfile.jsexports.styles = styles

Только после этого функция станет доступной для запуска и выполнения как отдельной командой gulp styles, так и в составе сводной задачи.

Работа с проектом и его сборка

Запуск проекта в режиме разработки осуществляется сводной задачей default, название которой зарезервировано в Gulp:

gulpfile.jsexports.default = parallel(
  styles,
  scripts,
  pages,
  watch_dev
)

Поскольку задача default для Gulp является задачей по умолчанию, запустить её можно командой gulp.

Для сборки проекта обычно создаётся отдельная задача с произвольным названием, которая последовательно выполняет необходимые действия:

gulpfile.jsexports.build = series(
  styles,
  scripts,
  pages
)

После этого сборка итоговой версии проекта осуществляется вводом в терминале команды gulp build.