Аб'яднанне файлаў у 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'));
}