Werk met lêers in Gulp

Gulp laat toe om 'n groep lêers te neem, 'n operasie op daardie groep uit te voer, en dan die veranderde lêers na 'n nuwe adres te plaas.

Vir hierdie doel is daar spesiale funksies src en dest. Kom ons begin deur hulle uit ons biblioteek in te voer:

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

Die funksie src laat toe om die gespesifiseerde lêer te verkry:

function task(cb) {
	return src('src/styles.css'); // return in plaas van om cb aan te roep
}

Met hierdie lêer kan verskeie operasies dan in 'n ketting uitgevoer word deur die funksie pipe te gebruik. Skematies lyk dit soos volg:

function task(cb) {
	return src('src/styles.css')
		.pipe(operasie1)
		.pipe(operasie2)
		.pipe(operasie3)
}

Die laaste oproep na pipe in die ketting eindig met die funksie dest, wat die gids spesifiseer waarheen die resultaat van die uitgevoerde operasies gestuur sal word:

function task(cb) {
	return src('src/styles.css')
		.pipe(operasie1)
		.pipe(operasie2)
		.pipe(operasie3)
		.pipe(dest('dist')); // stuur na die gids dist
}

Elke operasie voer 'n sekere manipulasie op ons lêer uit. Byvoorbeeld, jy kan eers LESS omskep na CSS, dan voorvoegsels by CSS eienskappe voeg, dan die verkrygde CSS minimeer en so aan.

Vir elke operasie is daar 'n spesifieke npm inprop vir Gulp. Inproppe moet geïnstalleer word en aan ons lêer gekoppel word. Ons sal die bestudering van verskeie inproppe in die volgende lesse aanpak.

Vir nou, om op te warm, laat ons ons lêer neem en 'n kopie daarvan na die gids dist stuur, asof ons sekere operasies daarop uitgevoer het:

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

Maak drie CSS lêers. Maak drie openbare take. Laat elke taak 'n kopie van een van ons lêers in 'n gespesifiseerde gids skep.

Skikking van paaie na lêers

Die funksie src kan as parameter nie net een lêer aanvaar nie, maar verskeie onmiddellik in die vorm van 'n skikking:

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

Maak drie CSS lêers. Maak 'n taak, wat 'n kopie van ons lêers in die gespesifiseerde gids sal maak.