Združevanje datotek v Gulp

Pri pisanju CSS kode je priročno, da ga razdelimo na več datotek. Vendar, več datotek kot jih je, počasneje se bo naložila spletna stran. Izkazalo se je, da je pri pisanju kode priročno delati v več datotekah, pri povezovanju v HTML pa te datoteke združiti v eno.

Pri tem nam bo pomagal poseben vtičnik gulp-concat. Namestimo ga v naš projekt: v naš projekt:

npm install gulp-concat --save-dev

Nato uvozimo nameščeni vtičnik:

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

Zdaj pa z njegovo pomočjo združimo več CSS datotek v eno:

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

Združite več JavaScript datotek v eno.

Operacije z združeno datoteko

Po združevanju se bo po verigi naprej premikala ena združena datoteka in nad njo lahko izvajamo različne operacije.

Za primer izvedimo minimizacijo CSS:

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

Združite več LESS datotek v eno, nato pretvorite to datoteko v CSS, nato izvedite minimizacijo dobljenega CSS.