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