Združevanje datotek v Gulp

Pri pisanju CSS kode je priročno, da ga razdelimo na več datotek. Vendar, več datotek kot jih je, počasneje se bo naložila spletna stran. Izkazalo se je, da je pri pisanju kode priročno delati v več datotekah, pri povezovanju v HTML pa te datoteke združiti v eno.

Pri tem nam bo pomagal poseben vtičnik gulp-concat. Namestimo ga v naš projekt: v naš projekt:

terminalnpm install gulp-concat --save-dev 

Nato uvozimo nameščeni vtičnik:

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

Zdaj pa z njegovo pomočjo združimo več CSS datotek v eno:

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

Operacije z združeno datoteko

Po združevanju se bo po verigi naprej premikala ena združena datoteka in nad njo lahko izvajamo različne operacije.

Za primer izvedimo minimizacijo CSS:

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