Spajanje fajlova u Gulp-u

Prilikom pisanja CSS koda, zgodno je ga podeliti u više fajlova. Međutim, što je više fajlova, sporije će se učitavati stranica sajta. Ispada da je pri pisanju koda zgodno raditi sa više fajlova, a prilikom povezivanja u HTML spojiti te fajlove u jedan.

U tome će nam pomoći specijalni plugin gulp-concat. Hajde da ga instalirmo u naš projekt: u naš projekt:

terminalnpm install gulp-concat --save-dev 

Nakon toga, uvezimo instalirani plugin:

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

Hajde da pomoću njega spojimo nekoliko CSS fajlova u jedan:

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

Operacije sa spojenim fajlom

Nakon spajanja, kroz lanac će se kretati dalje samo jedan spojeni fajl i nad njim se mogu izvršavati razne operacije.

Na primer, hajde da izvršimo minimizaciju CSS-a:

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