Penggabungan Fail dalam Gulp

Semasa menulis kod CSS, adalah mudah untuk memecahkannya kepada beberapa fail. Walau bagaimanapun, semakin banyak fail, semakin lambat laman web akan dimuatkan. Oleh itu, semasa menulis kod, adalah mudah untuk bekerja dengan beberapa fail, tetapi apabila menyambungkannya kepada HTML, fail-fail ini perlu digabungkan menjadi satu.

Plugin khas gulp-concat akan membantu kami dalam hal ini. Mari pasangkannya ke dalam projek kami: ke dalam projek kami:

npm install gulp-concat --save-dev

Selepas itu, import plugin yang telah dipasang:

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

Mari gunakannya untuk menggabungkan beberapa fail CSS menjadi satu:

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

Gabungkan beberapa fail JavaScript menjadi satu.

Operasi dengan Fail yang Digabungkan

Selepas penggabungan, satu fail gabungan akan bergerak melalui paip seterusnya dan pelbagai operasi boleh dilakukan ke atasnya.

Sebagai contoh, mari kita lakukan pemampatan CSS:

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

Gabungkan beberapa fail LESS menjadi satu, kemudian tukar fail ini kepada CSS, kemudian lakukan pemampatan CSS yang terhasil.