Failide ühendamine Gulpis

CSS-koodi kirjutamisel on mugav jagada seda mitmeks failiks. Kuid mida rohkem faile, seda aeglasemalt laeb veebileht. Selgub, et koodi kirjutamisel on mugav töötada mitmes failis, kuid HTML-i ühendamisel on vaja need failid üheks ühendada.

Selles aitab meid spetsiaalne plugin gulp-concat. Paigaldame selle oma projekti: oma projekti:

npm install gulp-concat --save-dev

Pärast seda impordime paigaldatud plugina:

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

Kasutame seda mitme CSS-faili ühendamiseks üheks failiks:

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

Ühendage mitu JavaScripti faili üheks.

Operatsioonid ühendatud failiga

Pärast ühendamist liigub kettas edasi üks ühendatud fail ja sellega saab teha erinevaid operatsioone.

Näitena teostame CSS-i minifitseerimise:

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

Ühendage mitu LESS-faili üheks, seejärel teisendage see fail CSS-iks, seejärel teostage saadud CSS-i minifitseerimine.