Соединување на датотеки во Gulp

При пишување на CSS код, погодно е да се подели на неколку датотеки. Сепак, колку повеќе датотеки, толку побавно ќе се вчитува страницата на веб-сајтот. Излегува дека при пишување код е погодно да се работи во неколку датотеки, а при поврзување кон HTML, да се спојат овие датотеки во една.

Во ова ќе ни помогне специјалниот plugin gulp-concat. Ајде да го инсталираме во нашиот проект: во нашиот проект:

npm install gulp-concat --save-dev

После ова, го импортираме инсталираниот plugin:

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

Ајде со негова помош да собереме неколку CSS датотеки во една:

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

Соединете неколку JavaScript датотеки во една.

Операции со соединетата датотека

После соединувањето, по синџирот понатаму ќе се движи една соединета датотека и над неа може да се извршат различни операции.

За пример, ајде да извршиме минимизација на CSS:

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

Соединете неколку LESS датотеки во една, потоа трансформирајте ја оваа датотека во CSS, потоа извршете минимизација на добиениот CSS.