Merging Files in Gulp

When writing CSS code, it is convenient to break it into several files. However, the more files there are, the slower the website page will load. It turns out that when writing code, it is convenient to work with several files, but when linking to HTML, merge these files into one.

A special plugin gulp-concat will help us with this. Let's install it into our project: into our project:

terminalnpm install gulp-concat --save-dev 

After that, we import the installed plugin:

javascriptlet {src, dest} = require('gulp');
let concat = require('gulp-concat');

Let's use it to combine several CSS files into one:

javascriptfunction task(cb) {
  return src('src/*.css')
    .pipe(concat('bundle.css'))
    .pipe(dest('dist'));
}

Operations with the Merged File

After merging, one merged file will move further down the chain, and various operations can be performed on it.

As an example, let's perform CSS minification:

javascriptfunction task(cb) {
  return src('src/*.css')
    .pipe(concat('bundle.css'))
    .pipe(cleanCSS())
    .pipe(dest('dist'));
}