Failide ühendamine Gulpis

CSS-koodi kirjutamisel on mugav jagada seda mitmeks failiks. Kuid mida rohkem faile, seda aeglasemalt laeb veebileht. Selgub, et koodi kirjutamisel on mugav töötada mitmes failis, kuid HTML-i ühendamisel on vaja need failid üheks ühendada.

Selles aitab meid spetsiaalne plugin gulp-concat. Paigaldame selle oma projekti: oma projekti:

terminalnpm install gulp-concat --save-dev 

Pärast seda impordime paigaldatud plugina:

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

Kasutame seda mitme CSS-faili ühendamiseks üheks failiks:

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

Operatsioonid ühendatud failiga

Pärast ühendamist liigub kettas edasi üks ühendatud fail ja sellega saab teha erinevaid operatsioone.

Näitena teostame CSS-i minifitseerimise:

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