Sammenslåing av filer i Gulp

Ved skriving av CSS-kode er det praktisk å dele den opp i flere filer. Imidlertid, jo flere filer, jo tregere vil nettsiden laste. Det viser seg at det er praktisk å jobbe med flere filer under kodeskriving, men når man kobler til HTML, bør disse filene slås sammen til én.

En spesiell plugin vil hjelpe oss med dette: gulp-concat. La oss installere den i prosjektet vårt: i prosjektet vårt:

terminalnpm install gulp-concat --save-dev 

Etter dette importerer vi den installerte pluginen:

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

La oss bruke den til å sette sammen flere CSS-filer til én:

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

Operasjoner med den sammenslåtte filen

Etter sammenslåing vil én sammenslått fil bevege seg videre gjennom kjeden, og ulike operasjoner kan utføres på den.

La oss for eksempel utføre minifisering av CSS:

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