Saambou van lêers in Gulp

Wanneer CSS-kode geskryf word, is dit gerieflik om dit in verskeie lêers op te deel. Hoe meer lêers daar egter is, hoe stadiger sal die webblad laai. Dit blyk dat dit gerieflik is om met verskeie lêers te werk tydens die skryf van kode, maar om hierdie lêers in een saam te voeg wanneer dit by HTML gekoppel word.

'n Spesiale inprop gulp-concat sal ons hierin help. Kom ons installeer dit in ons projek: in ons projek:

npm install gulp-concat --save-dev

Daarna voer ons die geïnstalleerde inprop in:

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

Kom ons gebruik dit om verskeie CSS lêers in een saam te voeg:

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

Voeg verskeie JavaScript-lêers in een saam.

Operasies met die saamgevoegde lêer

Na samevoeging sal een saamgevoegde lêer verder in die ketting beweeg en verskeie operasies kan daarop uitgevoer word.

Laat ons byvoorbeeld CSS-minimering uitvoer:

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

Voeg verskeie LESS-lêers in een saam, omskep dan hierdie lêer na CSS, en voer dan minimering uit op die verkrygde CSS.