Обединяване на файлове в Gulp

При писане на CSS код е удобно да се разделя на няколко файла. Обаче, колкото повече файлове, толкова по-бавно ще се зарежда страницата на сайта. Оказва се, че при писане на код е удобно да се работи в няколко файла, но при свързване към HTML тези файлове да се слеят в един.

В това ще ни помогне специалната добавка gulp-concat. Нека я инсталираме в нашия проект: в нашия проект:

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'));
}