Failų sujungimas naudojant Gulp

Rašant CSS kodą, patogu jį suskirstyti į kelis failus. Tačiau, kuo daugiau failų, tuot lėčiau įsikels svetainės puslapis. Pasirodo, kad rašant kodą patogu dirbti su keliais failais, o prijungiant prie HTML, sujungti šiuos failus į vieną.

Tam mums padės specialus įskiepis gulp-concat. Įdiekime jį į mūsų projektą: į mūsų projektą:

npm install gulp-concat --save-dev

Po to importuokime įdiegtą įskiepį:

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

Pabandykime su jo pagalba surinkti kelis CSS failus į vieną:

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

Sujunkite kelis JavaScript failus į vieną.

Operacijos su sujungtu failu

Po sujungimo toliau grandine judės vienas sujungtas failas ir su juo galima atlikti įvairias operacijas.

Pavyzdžiui, atlikime CSS minimizavimą:

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

Sujunkite kelis LESS failus į vieną, tada transformuokite šį failą į CSS, tada atlikite gauto CSS minimizavimą.