Failide töötlemine Gulpis

Gulp võimaldab võtta rühma faile, teostada selle rühmaga mingi operatsiooni ja seejärel muudetud failid paigutada uude aadressi.

Selleks on mõeldud spetsiaalsed funktsioonid src ja dest. Alustuseks impordime need oma teegist:

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

Funktsioon src võimaldab saada määratud faili:

function task(cb) {
	return src('src/styles.css'); // return callbacki väljakutsumise asemel
}

Selle failiga saab seejärel ahelana teostada erinevaid operatsioone funktsiooni pipe abil. Skeemiliselt näeb see välja järgmiselt:

function task(cb) {
	return src('src/styles.css')
		.pipe(operatsioon1)
		.pipe(operatsioon2)
		.pipe(operatsioon3)
}

Viimane pipe kutse ahelas lõpeb funktsiooniga dest, mis määrab kausta, kuhu tehtud operatsioonide tulemus saadetakse:

function task(cb) {
	return src('src/styles.css')
		.pipe(operatsioon1)
		.pipe(operatsioon2)
		.pipe(operatsioon3)
		.pipe(dest('dist')); // saadame kausta dist
}

Iga operatsioon teeb mingi manipulatsiooni meie failiga. Näiteks võib kõigepealt teisendada LESS-i CSS-iks, seejärel lisada CSS-i omadustele prefikseid, seejärel minimeerida saadud CSS-i ja nii edasi.

Iga operatsiooni jaoks on mõeldud oma npm plugin Gulpile. Pluginaid tuleb paigaldada ja ühendada meie failiga. Erinevate pluginatega tegeleme me järgmistes õppetundides.

Praegu soojenduseks võtame meie faili ja saadame selle koopia kausta dist, justkui oleksime sellega teinud mõned operatsioonid:

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

Looge kolm CSS faili. Looge kolm avalikku ülesannet. Olgu iga ülesanne loob ühe meie failidest koopia määratud kausta.

Failide teede massiiv

Funktsioon src võib parameetrina võtta mitte ühte faili, vaid kohe mitu massiivi kujul:

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

Looge kolm CSS faili. Looge ülesanne, mis teeb meie failidest koopia määratud kausta.