Bekerja dengan File di Gulp

Gulp memungkinkan untuk mengambil sekelompok file, melakukan beberapa operasi dengan kelompok tersebut, lalu menempatkan file-file yang telah diubah ke alamat baru.

Untuk ini, terdapat fungsi khusus src dan dest. Mari untuk awal impor mereka dari pustaka kita:

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

Fungsi src memungkinkan untuk mendapatkan file yang ditentukan:

function task(cb) {
	return src('src/styles.css'); // return instead of calling cb
}

Dengan file ini, kemudian berbagai operasi dapat dilakukan secara berantai menggunakan fungsi pipe. Secara skematis, ini terlihat seperti berikut:

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

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

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

Setiap operasi menghasilkan beberapa manipulasi pada file kita. Misalnya, pertama-tama kita dapat mengubah LESS menjadi CSS, lalu menambahkan prefiks ke properti CSS, lalu meminimalkan CSS yang dihasilkan dan seterusnya.

Untuk setiap operasi, terdapat plugin npm tersendiri untuk Gulp. Plugin perlu diinstal dan dihubungkan ke file kita. Kita akan mempelajari berbagai plugin dalam pelajaran berikutnya.

Sementara untuk pemanasan, mari kita ambil file kita dan kirim salinannya ke folder dist, seolah-olah telah melakukan beberapa operasi padanya:

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

Buatlah tiga file CSS. Buatlah tiga tugas publik. Biarkan setiap tugas membuat salinan salah satu file kita di folder yang ditentukan.

Array Path ke File

Fungsi src dapat menerima parameter bukan hanya satu file, tetapi beberapa sekaligus dalam bentuk array:

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

Buatlah tiga file CSS. Buatlah sebuah tugas, yang akan membuat salinan file-file kita di folder yang ditentukan.