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:

terminalnpm install gulp-concat --save-dev 

Dopodiché importiamo il plugin installato:

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

Utilizziamolo per unire diversi file CSS in uno solo:

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

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:

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