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:

npm install gulp-concat --save-dev

After that, we import the installed plugin:

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

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

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

Merge several JavaScript files into one.

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:

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

Merge several LESS files into one, then convert this file to CSS, then perform minification of the resulting CSS.