Práce se soubory v Gulp

Gulp umožňuje vzít skupinu souborů, provést s touto skupinou určitou operaci a poté změněné soubory umístit na novou adresu.

K tomu jsou určeny speciální funkce src a dest. Nejprve je importujme z naší knihovny:

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

Funkce src umožňuje získat zadaný soubor:

function task(cb) {
	return src('src/styles.css'); // return místo volání cb
}

S tímto souborem lze poté řetězcem provádět různé operace pomocí funkce pipe. Schematicky to vypadá následovně:

function task(cb) {
	return src('src/styles.css')
		.pipe(operace1)
		.pipe(operace2)
		.pipe(operace3)
}

Poslední volání pipe v řetězci končí funkcí dest, která určuje složku, do které bude výsledek provedených operací odeslán:

function task(cb) {
	return src('src/styles.css')
		.pipe(operace1)
		.pipe(operace2)
		.pipe(operace3)
		.pipe(dest('dist')); // odešleme do složky dist
}

Každá operace provádí určitou manipulaci s naším souborem. Například lze nejprve převést LESS na CSS, poté přidat prefixy k vlastnostem CSS, poté minimalizovat získané CSS a tak dále.

Pro každou operaci je určen vlastní npm zásuvný modul pro Gulp. Zásuvné moduly je třeba instalovat a připojovat k našemu souboru. Studiem různých zásuvných modulů se budeme zabývat v následujících lekcích.

Prozatím pro rozcvičení vezměme náš soubor a pošleme jeho kopii do složky dist, jako bychom s ním provedli nějaké operace:

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

Vytvořte tři CSS soubory. Vytvořte tři veřejné úkoly. Ať každý úkol vytvoří kopii jednoho z našich souborů v zadané složce.

Pole cest k souborům

Funkce src může jako parametr přijímat ne jeden soubor, ale několik najednou ve formě pole:

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

Vytvořte tři CSS soubory. Vytvořte úkol, který vytvoří kopii našich souborů v zadané složce.