Slučování souborů v Gulp

Při psaní CSS kódu je vhodné jej rozdělit do několika souborů. Čím více souborů však je, tím pomaleji se webová stránka načte. Vychází to tak, že při psaní kódu je výhodné pracovat v několika souborech, ale při připojování k HTML slít tyto soubory do jednoho.

S tím nám pomůže speciální plugin gulp-concat. Nainstalujme jej do našeho projektu:

npm install gulp-concat --save-dev

Poté nainstalovaný plugin importujeme:

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

S jeho pomocí slučme několik CSS souborů do jednoho:

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

Slučte několik JavaScript souborů do jednoho.

Operace se sloučeným souborem

Po sloučení bude řetězcem dále postupovat jeden sloučený soubor a nad ním lze provádět různé operace.

Jako příklad proveďme minimalizaci CSS:

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

Slučte několik LESS souborů do jednoho, poté transformujte tento soubor na CSS, poté proveďte minimalizaci získaného CSS.