Pengendalian Fail dalam Gulp

Gulp membenarkan pengambilan sekumpulan fail, melakukan beberapa operasi ke atas kumpulan tersebut, dan kemudian meletakkan fail yang telah diubah ke lokasi baharu.

Untuk tujuan ini, fungsi khas src dan dest disediakan. Mari mula-mula import fungsi-fungsi ini dari pustaka kita:

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

Fungsi src membenarkan pengambilan fail yang dinyatakan:

function task(cb) {
	return src('src/styles.css'); // return sebagai ganti memanggil cb
}

Pelbagai operasi kemudian boleh dilakukan secara berantai ke atas fail ini dengan menggunakan fungsi pipe. Secara skema, ia kelihatan seperti berikut:

function task(cb) {
	return src('src/styles.css')
		.pipe(operasi1)
		.pipe(operasi2)
		.pipe(operasi3)
}

Panggilan pipe terakhir dalam rantai diakhiri dengan fungsi dest, yang menetapkan folder destinasi untuk hasil operasi yang dilakukan:

function task(cb) {
	return src('src/styles.css')
		.pipe(operasi1)
		.pipe(operasi2)
		.pipe(operasi3)
		.pipe(dest('dist')); // hantar ke folder dist
}

Setiap operasi melakukan beberapa manipulasi ke atas fail kita. Sebagai contoh, kita boleh mula-mula menukar LESS kepada CSS, kemudian menambah awalan (prefix) kepada sifat-sifat CSS, kemudian meminimumkan CSS yang terhasil dan seterusnya.

Setiap operasi mempunyai plugin npmnya sendiri untuk Gulp. Plugin perlu dipasang dan disambungkan ke fail kita. Kita akan mempelajari pelbagai plugin dalam pelajaran yang akan datang.

Buat masa ini, sebagai latihan, mari ambil fail kita dan hantar salinannya ke folder dist, seolah-olah kita telah melakukan beberapa operasi ke atasnya:

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

Buat tiga fail CSS. Buat tiga tugas awam. Setiap tugas hendaklah mencipta salinan salah satu fail kita ke dalam folder yang ditentukan.

Tatasusunan Laluan Fail

Fungsi src boleh menerima bukan sahaja satu fail sebagai parameter, tetapi beberapa fail sekaligus dalam bentuk tatasusunan:

function task(cb) {
	let files = [
		'src/styles1.css',
		'src/styles2.css'
	];
	
	return src(files)
		.pipe(dest('dist'));
}

Buat tiga fail CSS. Buat satu tugas, yang akan membuat salinan fail-fail kita ke dalam folder yang dinyatakan.