Объединение файлов в 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'));
}