Combinarea fișierelor în Gulp

Când scriem cod CSS, este convenabil să-l împărțim în mai multe fișiere. Cu toate acestea, cu cât sunt mai multe fișiere, cu atât pagina site-ului se va încărca mai lent. Se dovedește că este convenabil să lucrăm cu mai multe fișiere la scrierea codului, dar la conectarea la HTML, să fuzionăm aceste fișiere într-unul singur.

Un plugin special gulp-concat ne va ajuta în acest sens. Să-l instalăm în proiectul nostru: în proiectul nostru:

npm install gulp-concat --save-dev

După aceasta, importăm plugin-ul instalat:

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

Să folosim acest plugin pentru a combina mai multe fișiere CSS într-unul singur:

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

Combinați mai multe fișiere JavaScript într-unul singur.

Operații cu fișierul combinat

După combinare, în lanț se va mișca în continuare un singur fișier combinat și asupra lui se pot efectua diverse operațiuni.

Să efectuăm, de exemplu, minimizarea CSS:

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

Combinați mai multe fișiere LESS într-unul singur, apoi transformați acest fișier în CSS, apoi efectuați minimizarea CSS-ului obținut.