Методы в Gulp

В коде ниже перечислены методы, постепенно мы рассмотрим все варианты:

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

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

src/dest

gulpfile.jsfunction yourTask() {
    return src("app/assets/css/**.css") // выбираем все css-файлы
        .pipe(dest("dist/assets/css/")) // и выгружаем
}
exports.yourTask = yourTask;

В данном примере мы видим работу двух методов:

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

В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).

Примеры наиболее используемых паттернов для выбора файлов:

app/**/*.* выбор всех файлов в папке app
app/js/**/*.js выбор всех js файлов в папке js
app/**/*.{css,js} все css и js файлы в папке app
app/{folder1,folder2}/**/*.{js,css} все js и css-файлы в папках folder1 и folder2
[«app/**/*.css», «app/**/*.js»] получаем сначала все css, потом все js в папке app
[«app/**/*.*», «!app/**/*.js»] все файлы в папке app, кроме js-файлов. (! — знак исключения)

watch

Важной функцией из встроенных в основной пакет Gulp является watch. Как можно понять по её названию, её основная цель — отслеживание. Разберёмся, как задать отслеживание файла. Для этого используется сама функцияwatch, которая принимает три основных параметра:

Пути к отслеживаемым файлам
Параметры отслеживания
Функция или задача, которая вызывается при изменении файла

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

add добавление нового файла
change изменение файла
unlink удаление файла
addDir добавление директории
unlinkDir удаление директории
ready окончание сканирования путей для отслеживания. В этот момент вотчер готов следить за изменениями. Такой этап можно назвать окончанием инициализации
error ошибка работы отслеживания

gulpfile.jsconst { watch } = require('gulp');
const changeAppStylesFile = (done) => {
  console.log('Ой, файл app.scss изменился');
  done();
};
const checkFileStructure = (done) => {
  console.log('Изменилась структура файлов');
  done();
};
const watchers = () => {
  // отслеживание только события `change`
  watch('src/sass/app.scss', { events: 'change' }, changeAppStylesFile);
  // отслеживание удаления и добавления файлов в директории
  watch('src/sass/', { events: ['add', 'unlink'] }, checkFileStructure);
};
exports.watchers = watchers;

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

gulpfile.jsconst { watch } = require('gulp');
const changeAppStylesFile = (done) => {
  console.log('Ой, файл app.scss изменился');
  done();
};
const checkFileStructure = (done) => {
  console.log('Изменилась структура файлов');
  done();
};
const watchers = () => {
  // отслеживание всех событий
  watch('src/sass/app.scss', changeAppStylesFile);
  // отслеживание всех событий
  watch('src/sass/', checkFileStructure);
};
exports.watchers = watchers;

series/parallel

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

gulpfile.jsexports.default = series(output, otherFunc, otherFunc2);

Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel:. В данном примере, сначала выполнится задача output, затем последовательно будут выполняться otherFunc и otherFunc2, после их завершения начнёт своё выполнение задача otherFunc3:

gulpfile.jsexports.default = series(
    output,
    parallel(otherFunc, otherFunc2),
    otherFunc3
);

lastRun

Используется для ускорения времени выполнения, за счёт пропуска файлов, которые не изменились с момента последнего успешного завершения задачи.

gulpfile.jsconst { src, dest, lastRun, watch } = require("gulp");
const imagemin = require("gulp-imagemin");

function images() {
    return src("app/assets/images/**/*.jpg", { since: lastRun(images) })
        .pipe(imagemin())
        .pipe(dest("dist/assets/img/"));
}

exports.default = function () {
    watch("app/assets/images/**/*.jpg", images);
};

pipe

Если не вдаваться в тонкие подробности, то pipe позволяет связывать потоки чтения и записи друг с другом.

При обработке файлов с помощью плагинов, например при компиляции SASS в CSS. Чтобы связать всю цепочку одновременно необходимо использовать pipe().

В контексте работы с пакетом Gulp можно выстроить типичную цепочку, или шаблон, задачи:

gulpfile.jsfunction название_таска() {
  return src('файл с которым работаем')
  // обработка первым плагином
  .pipe(pluginOne()) 
  // обработка вторым плагином
  .pipe(pluginTwo()) 
};