Lucrul cu fișiere în Gulp

Gulp permite luarea unui grup de fișiere, efectuarea unei operații cu acest grup, apoi plasarea fișierelor modificate la o nouă adresă.

Pentru aceasta sunt destinate funcțiile speciale src și dest. Să importăm mai întâi din biblioteca noastră:

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

Funcția src permite obținerea fișierului specificat:

function task(cb) {
	return src('src/styles.css'); // return în loc de apelul cb
}

Cu acest fișier apoi în lanț se pot executa diverse operații cu ajutorul funcției pipe. Schematic, arată astfel:

function task(cb) {
	return src('src/styles.css')
		.pipe(operația1)
		.pipe(operația2)
		.pipe(operația3)
}

Ultimul apel pipe din lanț se termină cu funcția dest, care stabilește directorul în care va fi trimis rezultatul operațiilor efectuate:

function task(cb) {
	return src('src/styles.css')
		.pipe(operația1)
		.pipe(operația2)
		.pipe(operația3)
		.pipe(dest('dist')); // vom trimite în directorul dist
}

Fiecare operație produce o anumită manipulare a fișierului nostru. De exemplu, se poate transforma mai întâi LESS în CSS, apoi se pot adăuga prefixe la proprietățile CSS, apoi se poate minimiza CSS-ul obținut și așa mai departe.

Pentru fiecare operație este destinat un anumit plugin npm pentru Gulp. Plugin-urile trebuie instalate și conectate la fișierul nostru. Studierea diverselor plugin-uri o vom face în lecțiile următoare.

Momentan, pentru încălzire, să luăm fișierul nostru și să-i trimitem o copie în directorul dist, ca și cum am fi efectuat asupra lui unele operații:

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

Creați trei fișiere CSS. Creați trei task-uri publice. Fiecare task să creeze o copie a unuia dintre fișierele noastre în directorul specificat.

Matrice de căi către fișiere

Funcția src poate primi ca parametru nu un singur fișier, ci mai multe deodată sub formă de matrice:

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

Creați trei fișiere CSS. Creați un task, care să facă o copie a fișierelor noastre în directorul specificat.