Bashkimi i skedarëve në Gulp

Gjatë shkrimit të kodit CSS është e përshtatshme ta ndajmë atë në disa skedarë. Megjithatë, sa më shumë skedarë, aq më ngadalë do të ngarkohet faqja e internetit. Rezulton se gjatë shkrimit të kodit është e përshtatshme të punohet në disa skedarë, por gjatë lidhjes me HTML, të bashkohen këto skedarë në një.

Në këtë do të na ndihmojë një plugin i veçantë gulp-concat. Le ta instalojmë atë në projektin tonë: në projektin tonë:

npm install gulp-concat --save-dev

Pas kësaj, importojmë plugin-in e instaluar:

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

Le të përdorim atë për të mbledhur disa skedarë CSS në një:

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

Bashkoni disa skedarë JavaScript në një.

Operacionet me skedarin e bashkuar

Pas bashkimit, përgjatë zinxhirit do të lëvizë një skedar i vetëm i bashkuar dhe mbi të mund të kryhen operacione të ndryshme.

Për shembull, le të kryejmë minimizimin e CSS:

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

Bashkoni disa skedarë LESS në një, pastaj shndërroni këtë skedar në CSS, pastaj kryeni minimizimin e CSS-së së përftuar.