Menggabungkan File di Gulp

Saat menulis kode CSS, lebih mudah untuk memecahnya menjadi beberapa file. Namun, semakin banyak file, semakin lambat halaman situs akan dimuat. Ternyata, saat menulis kode, lebih mudah bekerja dengan beberapa file, tetapi saat menghubungkannya ke HTML, file-file tersebut digabungkan menjadi satu.

Dalam hal ini, plugin khusus gulp-concat akan membantu kita. Mari kita instal ke proyek kita: ke proyek kita:

npm install gulp-concat --save-dev

Setelah itu, impor plugin yang telah diinstal:

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

Mari kita gunakan plugin tersebut untuk menggabungkan beberapa file CSS menjadi satu:

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

Gabungkan beberapa file JavaScript menjadi satu.

Operasi dengan File yang Telah Digabungkan

Setelah penggabungan, di sepanjang rantai selanjutnya akan bergerak satu file gabungan dan atasnya dapat dilakukan berbagai operasi.

Sebagai contoh, mari kita lakukan minifikasi CSS:

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

Gabungkan beberapa file LESS menjadi satu, kemudian ubah file tersebut menjadi CSS, lalu lakukan minifikasi terhadap CSS yang dihasilkan.