Gulpда файлларни бирлаштириш

CSS кодни ёзишда уни бир нечта файлларга бўлиш қулай. Бирок, файллар сони қанча кўп бўлса, веб-саҳифанинг юкланши шунча секинлашади. Маълум бўлдики, код ёзишда бир нечта файлларда ишлаш қулай, аммо HTML-га улашда эса бу файлларни биттага бирлаштириш керак.

Буда бизга gulp-concat maxсус плагини ёрдам беради. Келинг уни лойиҳамизга ўрнатамиз: лойиҳамизга ўрнатамиз:

terminalnpm install gulp-concat --save-dev 

Шундан сўнг ўрнатилган плагинни импорт қиламиз:

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

Келинг унинг ёрдамида бир нечта CSS файлларни биттага жамғаямиз:

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

Бирлаштирилган файл билан амаллар

Бирлаштирилгандан кейин занжир бўйича яна ҳаракатланадиган битта бирлаштирилган файл бўлади ва унга турли хил амалларни бажариш мумкин.

Мисол учун CSS-ни минимизация қиламиз:

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