Concaténation de fichiers dans Gulp

Lors de l'écriture du code CSS, il est pratique de le diviser en plusieurs fichiers. Cependant, plus il y a de fichiers, plus le chargement de la page du site sera lent. Il en résulte qu'il est pratique pour l'écriture du code de travailler avec plusieurs fichiers, mais pour l'inclusion dans le HTML, de fusionner ces fichiers en un seul.

Un plugin spécial gulp-concat nous y aidera. Installons-le dans notre projet : dans notre projet :

npm install gulp-concat --save-dev

Après cela, importons le plugin installé :

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

Utilisons-le pour assembler plusieurs fichiers CSS en un seul :

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

Concaténez plusieurs fichiers JavaScript en un seul.

Opérations sur le fichier concaténé

Après la concaténation, un seul fichier fusionné continuera à avancer dans la chaîne de traitement et diverses opérations pourront être effectuées sur lui.

Par exemple, minifions le CSS :

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

Concaténez plusieurs fichiers LESS en un seul, puis transformez ce fichier en CSS, puis effectuez la minification du CSS obtenu.