Sammenslåing av filer i Gulp

Ved skriving av CSS-kode er det praktisk å dele den opp i flere filer. Imidlertid, jo flere filer, jo tregere vil nettsiden laste. Det viser seg at det er praktisk å jobbe med flere filer under kodeskriving, men når man kobler til HTML, bør disse filene slås sammen til én.

En spesiell plugin vil hjelpe oss med dette: gulp-concat. La oss installere den i prosjektet vårt: i prosjektet vårt:

npm install gulp-concat --save-dev

Etter dette importerer vi den installerte pluginen:

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

La oss bruke den til å sette sammen flere CSS-filer til én:

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

Sammenslå flere JavaScript-filer til én.

Operasjoner med den sammenslåtte filen

Etter sammenslåing vil én sammenslått fil bevege seg videre gjennom kjeden, og ulike operasjoner kan utføres på den.

La oss for eksempel utføre minifisering av CSS:

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

Sammenslå flere LESS-filer til én, konverter deretter denne filen til CSS, og utfør deretter minifisering av den resulterende CSS-en.