Bestanden samenvoegen in Gulp

Bij het schrijven van CSS code is het handig om het op te splitsen in meerdere bestanden. Echter, hoe meer bestanden, hoe langzamer de webpagina van de site zal laden. Het blijkt dat bij het schrijven van code het handig is om in meerdere bestanden te werken, maar bij het aansluiten op HTML deze bestanden in één te samen te voegen.

Hier helpt een speciale plug-in gulp-concat ons. Laten we het in ons project installeren: in ons project:

terminalnpm install gulp-concat --save-dev 

Daarna importeren we de geïnstalleerde plug-in:

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

Laten we er mee enkele CSS bestanden in één verzamelen:

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

Bewerkingen met het samengevoegde bestand

Na het samenvoegen zal verder in de keten één samengevoegd bestand bewegen en daarop kunnen verschillende bewerkingen worden uitgevoerd.

Laten we bijvoorbeeld CSS-minimalisatie uitvoeren:

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