Memantau Perubahan Dokumen di Gulp

Tidak terlalu nyaman untuk memanggil perintah di konsol setiap kali perlu melakukan beberapa transformasi - karena saat menulis kode, hal ini harus dilakukan sangat sering.

Oleh karena itu, Gulp memiliki fungsi bawaan khusus watch untuk memantau perubahan file. Saat ada file yang dipantau mengalami perubahan, tugas yang sesuai akan dijalankan secara otomatis.

Mari kita lihat contoh transformasi LESS ke CSS. Pertama, mari kita hubungkan semua yang diperlukan:

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

Sekarang mari buat tugas untuk transformasi:

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

Sekarang mari lakukan ekspor fungsi anonim, di dalamnya kita akan memantau perubahan file kita, memanggil tugas kita dalam kasus ini:

exports.default = function() {
	watch('src/*.less', task);
};

Setelah dijalankan di baris perintah, tugas "abadi" akan berjalan. Ini berarti bahwa terminal ini tidak dapat digunakan untuk memasukkan perintah lain. Menghentikan eksekusi tugas seperti itu dapat dilakukan dengan menekan kombinasi Ctrl + C di terminal.

Anda dapat memantau berbagai grup file, dengan mengaitkannya ke tugas yang berbeda:

exports.default = function() {
	watch('src/*.less', task1);
	watch('src/*.sass', task1);
};

Atau Anda dapat menjalankan serangkaian tugas untuk satu grup:

exports.default = function() {
	watch('src/*.less', series(task1, task2));
};

Misalkan Anda memiliki grup file JavaScript. Buatlah agar file-file ini digabungkan menjadi satu file, dan kemudian minimisasi file tersebut dilakukan. Buatlah agar tugas dijalankan saat ada perubahan pada salah satu file kita.