Tiedostojen yhdistäminen Gulpissa

CSS-koodia kirjoitettaessa on kätevää jakaa se useaan tiedostoon. Kuitenkin, mitä enemmän tiedostoja, sitä hitaammin verkkosivun sivu latautuu. Käy ilmi, että koodia kirjoitettaessa on kätevää työskennellä useassa tiedostossa, mutta HTML:ään liitettäessä on hyvä yhdistää nämä tiedostot yhdeksi.

Tässä auttaa erityislaajennus gulp-concat. Asennetaan se projektiimme: projektiimme:

terminalnpm install gulp-concat --save-dev 

Tämän jälkeen tuomme asennetun laajennuksen:

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

Yhdistetään sen avulla useita CSS tiedostoja yhdeksi:

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

Toiminnot yhdistetyllä tiedostolla

Yhdistämisen jälkeen ketjua eteenpäin liikkuu yksi yhdistetty tiedosto, ja sille voi suorittaa erilaisia toimintoja.

Esimerkkinä suoritetaan CSS:n minimointi:

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