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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сделайте три СSS файла. Сделайте три публичных задачи. Пусть каждая задача создает копию одного из наших файлов в заданной папке.

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

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

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

Сделайте три СSS файла. Сделайте задачу, которая сделает копию наших файлов в указанной папке.