Аб'яднанне файлаў у 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.