Спајање фајлова у Gulp

Приликом писања CSS кода, погодно је да га поделимо на више фајлова. Међутим, што је више фајлова, то ће се страница сајта спорије учитавати. Испада да је приликом писања кода погодно радити у више фајлова, али приликом повезивања са HTML-ом, те фајлове треба спојити у један.

У томе ће нам помоћи специјални плагин gulp-concat. Хајде да га инсталирамо у наш пројекат: у наш пројекат:

npm install gulp-concat --save-dev

Након тога, увезимо инсталирани плагин:

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

Хајде да сада уз његову помоћ спојимо неколико CSS фајлова у један:

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

Спојите неколико JavaScript фајлова у један.

Операције над спојеним фајлом

Након спајања, кроз цевовод ће се кретати један спојени фајл и над њим се могу изводити разне операције.

За пример, хајде да извршимо минимизацију CSS-а:

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

Спојите неколико LESS фајлова у један, затим конвертујте тај фајл у CSS, па извршите минимизацију добијеног CSS-а.