Filsammenlægning i Gulp

Når man skriver CSS-kode er det praktisk at opdele den i flere filer. Men jo flere filer, jo langsommere indlæses websidens side. Det viser sig, at det er praktisk at arbejde i flere filer, når man skriver kode, men når man tilslutter til HTML, skal disse filer samles til én.

En speciel plugin gulp-concat vil hjælpe os med dette. Lad os installere den i vores projekt: i vores projekt:

npm install gulp-concat --save-dev

Efter det importerer vi den installerede plugin:

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

Lad os bruge den til at samle flere CSS-filer filer til én:

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

Saml flere JavaScript-filer til én.

Operationer med den samlede fil

Efter sammenlægning vil der bevæge sig én samlet fil videre gennem kæden, og den kan udføres forskellige operationer på den.

Lad os for eksempel udføre CSS-minimering:

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

Saml flere LESS-filer til én, transformér derefter denne fil til CSS, og udfør derefter minimering af den resulterende CSS.