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:

npm install gulp-concat --save-dev

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

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

Yhdistetään sen avulla useita CSS tiedostoja yhdeksi:

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

Yhdistä useita JavaScript-tiedostoja yhdeksi.

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:

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

Yhdistä useita LESS-tiedostoja yhdeksi, muunna sitten tämä tiedosto CSS:ksi, ja suorita saatun CSS:n minimointi.