Spajanje fajlova u Gulp-u

Prilikom pisanja CSS koda, zgodno je ga podeliti u više fajlova. Međutim, što je više fajlova, sporije će se učitavati stranica sajta. Ispada da je pri pisanju koda zgodno raditi sa više fajlova, a prilikom povezivanja u HTML spojiti te fajlove u jedan.

U tome će nam pomoći specijalni plugin gulp-concat. Hajde da ga instalirmo u naš projekt: u naš projekt:

npm install gulp-concat --save-dev

Nakon toga, uvezimo instalirani plugin:

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

Hajde da pomoću njega spojimo nekoliko CSS fajlova u jedan:

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

Spojite nekoliko JavaScript fajlova u jedan.

Operacije sa spojenim fajlom

Nakon spajanja, kroz lanac će se kretati dalje samo jedan spojeni fajl i nad njim se mogu izvršavati razne operacije.

Na primer, hajde da izvršimo minimizaciju CSS-a:

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

Spojite nekoliko LESS fajlova u jedan, zatim transformišite taj fajl u CSS, pa izvršite minimizaciju dobijenog CSS-a.