Bestanden samenvoegen in Gulp

Bij het schrijven van CSS code is het handig om het op te splitsen in meerdere bestanden. Echter, hoe meer bestanden, hoe langzamer de webpagina van de site zal laden. Het blijkt dat bij het schrijven van code het handig is om in meerdere bestanden te werken, maar bij het aansluiten op HTML deze bestanden in één te samen te voegen.

Hier helpt een speciale plug-in gulp-concat ons. Laten we het in ons project installeren: in ons project:

npm install gulp-concat --save-dev

Daarna importeren we de geïnstalleerde plug-in:

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

Laten we er mee enkele CSS bestanden in één verzamelen:

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

Voeg meerdere JavaScript bestanden samen in één.

Bewerkingen met het samengevoegde bestand

Na het samenvoegen zal verder in de keten één samengevoegd bestand bewegen en daarop kunnen verschillende bewerkingen worden uitgevoerd.

Laten we bijvoorbeeld CSS-minimalisatie uitvoeren:

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

Voeg meerdere LESS bestanden samen in één, transformeer dat bestand vervolgens naar CSS, en voer daarna minimalisatie uit van de verkregen CSS.