Filsammenlægning i Gulp

Når man skriver CSS-kode er det praktisk at opdele den i flere filer. Men jo flere filer, jo langsommere indlæses websidens side. Det viser sig, at det er praktisk at arbejde i flere filer, når man skriver kode, men når man tilslutter til HTML, skal disse filer samles til én.

En speciel plugin gulp-concat vil hjælpe os med dette. Lad os installere den i vores projekt: i vores projekt:

terminalnpm install gulp-concat --save-dev 

Efter det importerer vi den installerede plugin:

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

Lad os bruge den til at samle flere CSS-filer filer til én:

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

Operationer med den samlede fil

Efter sammenlægning vil der bevæge sig én samlet fil videre gennem kæden, og den kan udføres forskellige operationer på den.

Lad os for eksempel udføre CSS-minimering:

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