Bashkimi i skedarëve në Gulp

Gjatë shkrimit të kodit CSS është e përshtatshme ta ndajmë atë në disa skedarë. Megjithatë, sa më shumë skedarë, aq më ngadalë do të ngarkohet faqja e internetit. Rezulton se gjatë shkrimit të kodit është e përshtatshme të punohet në disa skedarë, por gjatë lidhjes me HTML, të bashkohen këto skedarë në një.

Në këtë do të na ndihmojë një plugin i veçantë gulp-concat. Le ta instalojmë atë në projektin tonë: në projektin tonë:

terminalnpm install gulp-concat --save-dev 

Pas kësaj, importojmë plugin-in e instaluar:

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

Le të përdorim atë për të mbledhur disa skedarë CSS në një:

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

Operacionet me skedarin e bashkuar

Pas bashkimit, përgjatë zinxhirit do të lëvizë një skedar i vetëm i bashkuar dhe mbi të mund të kryhen operacione të ndryshme.

Për shembull, le të kryejmë minimizimin e CSS:

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