Combinación de archivos en Gulp

Al escribir código CSS, es conveniente dividirlo en varios archivos. Sin embargo, cuantos más archivos, más lento se cargará el sitio web. Resulta que al escribir código, es conveniente trabajar con varios archivos, pero al incluirlo en el HTML, fusionar estos archivos en uno.

Un complemento especial gulp-concat nos ayudará con esto. Vamos a instalarlo en nuestro proyecto: en nuestro proyecto:

npm install gulp-concat --save-dev

Después de esto, importamos el complemento instalado:

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

Usémoslo para combinar varios archivos CSS en uno:

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

Combina varios archivos JavaScript en uno.

Operaciones con el archivo combinado

Después de la combinación, por la cadena se moverá un único archivo combinado y sobre él se podrán realizar varias operaciones.

Como ejemplo, minimicemos el CSS:

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

Combina varios archivos LESS en uno, luego convierte este archivo a CSS, luego minimiza el CSS resultante.