ფაილების გაერთიანება 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-ის მინიმიზაცია.