При написании CSS кода удобно разбивать его на несколько файлов. Однако, чем больше файлов, тем медленнее будет грузится страница сайта. Получается, что при написании кода удобно работать в нескольких файлах, а при подключении к HTML слить эти файлы в один.
В этом нам поможет специальный плагин gulp-concat. Давайте установим его в наш проект: в наш проект:
npm install gulp-concat --save-dev
После этого импортируем установленный плагин:
let {src, dest} = require('gulp');
let concat = require('gulp-concat');
Давайте с его помощью соберем несколько CSS файлов в один:
function task(cb) {
return src('src/*.css')
.pipe(concat('bundle.css'))
.pipe(dest('dist'));
}
Объедините несколько JavaScript файлов в один.
Операции с объединенным файлом
После объединения по цепочке дальше будет двигаться один объединенный файл и над ним можно будет выполнять различные операции.
Для примера давайте выполним минимизацию CSS:
function task(cb) {
return src('src/*.css')
.pipe(concat('bundle.css'))
.pipe(cleanCSS())
.pipe(dest('dist'));
}
Объедините несколько LESS файлов в один, затем преобразуйте этот файл в CSS, затем выполните минимизацию полученного CSS.