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

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