Полный цикл в digital

Методы в 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, которая принимает три основных параметра:

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

Функция 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()) 
};
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг