Обединяване на файлове в 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.