Concatenando arquivos no Gulp

Ao escrever código CSS, é conveniente dividi-lo em vários arquivos. No entanto, quanto mais arquivos, mais lento o site carregará. Assim, ao escrever o código, é conveniente trabalhar com vários arquivos, mas ao vinculá-los ao HTML, mesclar esses arquivos em um só.

Um plugin especial nos ajudará com isso: gulp-concat. Vamos instalá-lo em nosso projeto:

npm install gulp-concat --save-dev

Depois disso, importamos o plugin instalado:

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

Vamos usá-lo para combinar vários arquivos CSS em um só:

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

Concatene vários arquivos JavaScript em um só.

Operações com o arquivo concatenado

Após a concatenação, apenas um arquivo combinado seguirá pela cadeia de operações, e várias operações poderão ser executadas sobre ele.

Como exemplo, vamos minificar o CSS:

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

Concatene vários arquivos LESS em um só, depois transforme esse arquivo em CSS e, em seguida, minifique o CSS resultante.