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'ти минификациялаңыз.