Práca so súbormi v Gulp

Gulp umožňuje zobrať skupinu súborov, vykonať s touto skupinou nejakú operáciu a potom upravené súbory umiestniť na novú adresu.

Na to sú určené špeciálne funkcie src a dest. Najprv ich importujme z našej knižnice:

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

Funkcia src umožňuje získať zadaný súbor:

function task(cb) {
	return src('src/styles.css'); // return namiesto volania cb
}

S týmto súborom je možné následne vykonávať rôzne operácie v reťazci pomocou funkcie pipe. Schematicky to vyzerá nasledovne:

function task(cb) {
	return src('src/styles.css')
		.pipe(operácia1)
		.pipe(operácia2)
		.pipe(operácia3)
}

Posledné volanie pipe v reťazci končí funkciou dest, ktorá určuje priečinok, do ktorého bude odoslaný výsledok vykonaných operácií:

function task(cb) {
	return src('src/styles.css')
		.pipe(operácia1)
		.pipe(operácia2)
		.pipe(operácia3)
		.pipe(dest('dist')); // pošleme do priečinka dist
}

Každá operácia vykonáva nejakú manipuláciu s naším súborom. Napríklad, najprv je možné transformovať LESS na CSS, potom pridať prefixy k vlastnostiam CSS, potom minimalizovať výsledné CSS a tak ďalej.

Pre každú operáciu je určený vlastný npm plugin pre Gulp. Pluginy je potrebné nainštalovať a pripojiť k nášmu súboru. Štúdiom rôznych pluginov sa budeme zaoberať v nasledujúcich lekciách.

Teraz na rozcvičku zoberme náš súbor a pošlime jeho kópiu do priečinka dist, ako keby sme nad ním vykonali nejaké operácie:

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

Vytvorte tri CSS súbory. Vytvorte tri verejné úlohy. Nech každá úloha vytvorí kópiu jedného z našich súborov v zadanom priečinku.

Pole ciest k súborom

Funkcia src môže ako parameter prijať nie jeden súbor, ale niekoľko naraz vo forme poľa:

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

Vytvorte tri CSS súbory. Vytvorte úlohu, ktorá vytvorí kópiu našich súborov v zadanom priečinku.