Работа с файлами Gulp
Gulp
позволяет брать группу файлов, производить с этой группой некоторую операцию, а затем измененные файлы размещать по новому адресу.
Для этого предназначены специальные функции src
и dest
. Давайте для начала импортируем их из нашей библиотеки:
gulpfile.jslet {src, dest} = require('gulp');
Функция src
позволяет получить указанный файл:
gulpfile.jsfunction task(cb) {
// return вместо вызова cb
return src("src/styles.css");
}
С этим файлом затем по цепочке можно выполнять различные операции с помощью функции pipe
. Схематично это выглядит следующим образом:
Последний вызов pipe
в цепочке заканчивается функцией dest
, задающей папку, в которую отправится результат проведенных операций:
gulpfile.jsfunction task(cb) {
// отправим в папку dist
return src("src/styles.css").pipe(операция1).pipe(операция2).pipe(операция3).pipe(dest("dist"));
}
Массив путей
Функция src
параметром может принимать не один файл, а сразу несколько в виде массива:
gulpfile.jsfunction task(cb) {
let files = ["src/styles1.css", "src/styles2.css"];
return src(files).pipe(dest("dist"));
}
Поток операций
Давайте теперь научимся выполнять несколько операций над файлами. К примеру, сначала преобразуем LESS в CSS, а затем минимизируем полученный CSS.
Для начала давайте импортируем все, что нужно:
gulpfile.jslet {src, dest} = require('gulp');
let less = require('gulp-less');
let cleanCSS = require('gulp-clean-css');
Теперь выполним описанные операции:
gulpfile.jsfunction task(cb) {
return src("src/*.less").pipe(less()).pipe(cleanCSS()).pipe(dest("dist"));
}