Gulpда файлларни бирлаштириш

CSS кодни ёзишда уни бир нечта файлларга бўлиш қулай. Бирок, файллар сони қанча кўп бўлса, веб-саҳифанинг юкланши шунча секинлашади. Маълум бўлдики, код ёзишда бир нечта файлларда ишлаш қулай, аммо HTML-га улашда эса бу файлларни биттага бирлаштириш керак.

Буда бизга gulp-concat maxсус плагини ёрдам беради. Келинг уни лойиҳамизга ўрнатамиз: лойиҳамизга ўрнатамиз:

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-ни минимизация қилинг.