Gulp-da faýllary birleşdirmek

CSS kody ýazanda ony birnäçe faýla bölmek amatlydyr. Emma, faýllaryň sany köp bolsa, sahypa şol derejede haýal ýüklenip başlar. Netijede, kod ýazýarken birnäçe faýlda işlemek amatly, emma HTML-e birikdirilende ol faýllary bir faýlda birleşdirmek gerek bolýar.

Bize bu işde gulp-concat atly ýörite plagin kömek eder. Geliň ony proýektimize guruň: proýektimize guruň:

npm install gulp-concat --save-dev

Şondan soň gurulan plagini import edeliň:

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

Geliň onuň kömegi bilen birnäçe CSS faýlyny bir faýlda jemläýliň:

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

Birnäçe JavaScript faýlyny bir faýlda birleşdiriň.

Birleşdirilen faýl bilen amallar

Birleşdirilenden soň, zynjyr boýunça bir birleşdirilen faýl hereket eder we onuň üstünde dürli amallary ýerine ýetirip bolýar.

Mysal üçin, CSS-i minimalizirläp göreliň:

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

Birnäçe LESS faýlyny bir faýlda birleşdiriň, soňra ol faýly CSS-e öwüriň, soňra aýlynan CSS-i minimalizirleň.