Łączenie plików w Gulp

Podczas pisania kodu CSS wygodnie jest podzielić go na kilka plików. Jednak im więcej plików, tym wolniej będzie ładować się strona internetowa. Okazuje się, że podczas pisania kodu wygodnie jest pracować na wielu plikach, a podczas podłączania do HTML scalić te pliki w jeden.

Pomoże nam w tym specjalna wtyczka gulp-concat. Zainstalujmy ją w naszym projekcie: w naszym projekcie:

npm install gulp-concat --save-dev

Następnie zaimportujmy zainstalowaną wtyczkę:

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

Za jej pomocą połączmy kilka plików CSS w jeden:

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

Połącz kilka plików JavaScript w jeden.

Operacje na połączonym pliku

Po połączeniu dalej w łańcuchu będzie przesuwał się jeden połączony plik i na nim można będzie wykonywać różne operacje.

Dla przykładu wykonajmy minifikację CSS:

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

Połącz kilka plików LESS w jeden, następnie przekształć ten plik na CSS, a potem wykonaj minifikację otrzymanego CSS.