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:

terminalnpm install gulp-concat --save-dev 

Bundan sonra kurulan eklentiyi içe aktaralım:

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

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

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

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:

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