Zlučovanie súborov v Gulp

Pri písaní CSS kódu je vhodné rozdeliť ho na niekoľko súborov. Avšak, čím viac súborov, tým pomalšie sa bude načítavať stránka webu. Ukazuje sa, že pri písaní kódu je vhodné pracovať v niekoľkých súboroch, ale pri pripájaní k HTML zlúčiť tieto súbory do jedného.

S tým nám pomôže špeciálny plugin gulp-concat. Nainštalujme ho do nášho projektu: do nášho projektu:

npm install gulp-concat --save-dev

Potom importujeme nainštalovaný plugin:

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

Pomocou neho zlúčme niekoľko CSS súborov do jedného:

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

Zlúčte niekoľko JavaScript súborov do jedného.

Operácie so zlúčeným súborom

Po zlúčení sa po reťazci bude ďalej pohybovať jeden zlúčený súbor a nad ním je možné vykonávať rôzne operácie.

Napríklad, vykonajme minimalizáciu CSS:

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

Zlúčte niekoľko LESS súborov do jedného, potom transformujte tento súbor na CSS, potom vykonajte minimalizáciu získaného CSS.