Unione di file in Gulp

Quando si scrive il codice CSS, è comodo suddividerlo in diversi file. Tuttavia, più file ci sono, più lentamente caricherà la pagina del sito. Risulta che durante la scrittura del codice è comodo lavorare su più file, ma quando si collegano all'HTML, questi file vanno fusi in uno solo.

In questo ci aiuterà uno speciale plugin gulp-concat. Installiamolo nel nostro progetto: nel nostro progetto:

npm install gulp-concat --save-dev

Dopodiché importiamo il plugin installato:

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

Utilizziamolo per unire diversi file CSS in uno solo:

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

Unisci diversi file JavaScript in uno.

Operazioni sul file unito

Dopo l'unione, lungo la catena si muoverà un unico file unito e su di esso potranno essere eseguite varie operazioni.

Ad esempio, eseguiamo la minificazione del CSS:

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

Unisci diversi file LESS in uno, poi trasforma questo file in CSS, infine esegui la minificazione del CSS ottenuto.