Gulp'da Dosya Birleştirme

CSS kodu yazarken onu birkaç dosyaya bölmek uygundur. Ancak, ne kadar çok dosya olursa, site sayfası o kadar yavaş yüklenecektir. Sonuç olarak, kod yazarken birkaç dosyada çalışmak uygunken, HTML'e bağlanırken bu dosyaları tek bir dosyada birleştirmek gerekir.

Bu konuda bize özel bir eklenti gulp-concat yardımcı olacaktır. Hadi onu projemize kuralım: projemize kuralım:

npm install gulp-concat --save-dev

Bundan sonra kurulan eklentiyi içe aktaralım:

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

Hadi onun yardımıyla birkaç CSS dosyasını tek bir dosyada toplayalım:

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

Birkaç JavaScript dosyasını tek bir dosyada birleştirin.

Birleştirilmiş Dosya ile İşlemler

Birleştirmeden sonra, zincir boyunca daha fazla tek bir birleştirilmiş dosya hareket edecek ve üzerinde çeşitli işlemler yapılabilecektir.

Örnek olarak CSS minimizasyonu yapalım:

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

Birkaç LESS dosyasını tek bir dosyada birleştirin, ardından bu dosyayı CSS'e dönüştürün, ardından elde edilen CSS'in minimizasyonunu gerçekleştirin.