Gulp-da fayllarni birlashtirish

CSS kodini yozishda uni bir nechta fayllarga bo'lish qulay. Biroq, fayllar qancha ko'p bo'lsa, sayt sahifasi shuncha sekin yuklanadi. Ma'lum bo'ladiki, kod yozishda bir nechta fayllarda ishlash qulay, lekin HTML-ga ulashda bu fayllarni bitta faylga birlashtirish kerak.

Bunda bizga gulp-concat maxsus plagini yordam beradi. Keling, uni loyihamizga o'rnatamiz: loyihamizga o'rnatamiz:

npm install gulp-concat --save-dev

Shundan so'ng o'rnatilgan plaginni import qilamiz:

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

Keling, uning yordamida bir nechta CSS fayllarini bittaga jamlaymiz:

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

Bir nechta JavaScript fayllarini bitta faylga birlashtiring.

Birlashtirilgan fayl bilan amallar

Birlashtirilgandan so'ng, zanjir bo'ylab keyingi qadamda bitta birlashtirilgan fayl harakatlanadi va uning ustida turli xil amallarni bajarish mumkin.

Misol uchun, keling CSS ni minimallashtiramiz:

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

Bir nechta LESS fayllarini bittaga birlashtiring, keyin ushbu faylni CSS ga aylantiring, keyin hosil bo'lgan CSS ni minimallashtiring.