Работа с файлами в Gulp

Gulp позволяет брать группу файлов, производить с этой группой некоторую операцию, а затем измененные файлы размещать по новому адресу.

Для этого предназначены специальные функции src и dest. Давайте для начала импортируем их из нашей библиотеки:

javascriptlet {src, dest} = require('gulp');

Функция src позволяет получить указанный файл:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return вместо вызова cb
}

С этим файлом затем по цепочке можно выполнять различные операции с помощью функции pipe. Схематично это выглядит следующим образом:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(операция1)
    .pipe(операция2)
    .pipe(операция3)
}

Последний вызов pipe в цепочке заканчивается функцией dest, задающей папку, в которую отправится результат проведенных операций:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(операция1)
    .pipe(операция2)
    .pipe(операция3)
    .pipe(dest('dist')); // отправим в папку dist
}

Каждая операция производит некоторую манипуляцию с нашим файлом. Например, можно сначала преобразовать LESS в CSS, затем добавить префиксы к свойствам CSS, затем минимизировать полученный CSS и так далее.

Для каждой операции предназначен свой npm плагин для Gulp. Плагины нужно устанавливать и подключать к нашему файлу. Изучением различных плагинов мы займемся в следующих уроках.

Пока для разминки давайте возьмем наш файл и отправим его копию в папку dist, как будто проделав над ним некоторые операции:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(dest('dist'));
}

Массив путей к файлам

Функция src параметром может принимать не один файл, а сразу несколько в виде массива:

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}