Sammanfogning av filer i Gulp

När man skriver CSS-kod är det bekvämt att dela upp den i flera filer. Men ju fler filer det är, desto långsammare laddas webbplatsens sida. Det visar sig att det är bekvämt att arbeta med flera filer när man skriver kod, men när man ansluter till HTML, slå ihop dessa filer till en.

En speciell plugin gulp-concat kommer att hjälpa oss med detta. Låt oss installera den i vårt projekt: i vårt projekt:

npm install gulp-concat --save-dev

Efter det importerar vi den installerade pluginen:

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

Låt oss använda den för att samla flera CSS-filer till en:

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

Sammanfoga flera JavaScript-filer till en.

Operationer med den sammanslagna filen

Efter sammanfogningen kommer en enda sammanslagen fil att röra sig vidare längs kedjan, och olika operationer kan utföras på den.

Låt oss som exempel utföra minifiering av CSS:

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

Sammanfoga flera LESS-filer till en, transformera sedan denna fil till CSS, och utför därefter minifiering av den resulterande CSS:en.