Файлдарды 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-ті минификациялаңыз.