Методы в 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/**/*.*
выбор всех файлов в папке appapp/js/**/*.js
выбор всех js файлов в папке jsapp/**/*.{css,js}
все css и js файлы в папке appapp/{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())
};