การติดตามการเปลี่ยนแปลงของเอกสารใน Gulp

มันไม่สะดวกเลยที่จะต้องเรียกคำสั่งในคอนโซลทุกครั้งเมื่อต้องการดำเนินการแปลงบางอย่าง - เพราะเมื่อเขียนโค้ดจำเป็นต้องทำสิ่งนี้บ่อยมาก

ดังนั้นใน Gulp จึงมีฟังก์ชันพิเศษในตัวคือ watch สำหรับติดตามการเปลี่ยนแปลงไฟล์ เมื่อไฟล์ใด ๆ ที่ถูกติดตามมีการเปลี่ยนแปลง งานที่เกี่ยวข้องจะถูกเรียกทำงานโดยอัตโนมัติ

มาดูตัวอย่างการแปลง LESS เป็น CSS กัน ก่อนอื่นมาเชื่อมต่อทุกสิ่งที่จำเป็น:

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

ตอนนี้มาสร้างงานสำหรับการแปลง:

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

ตอนนี้มาทำการส่งออกฟังก์ชันแบบไม่ระบุชื่อ ซึ่งภายในเราจะติดตามการเปลี่ยนแปลงไฟล์ของเรา และในกรณีนี้จะเรียกงานของเรา:

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

หลังจากเริ่มทำงานในบรรทัดคำสั่ง จะมีงาน "ถาวร" ทำงานอยู่ นั่นหมายความว่าไม่สามารถป้อนคำสั่งอื่นลงในเทอร์มินัลนี้ได้ สามารถหยุดการดำเนินงานดังกล่าวได้โดยกดการรวมกันของปุ่ม Ctrl + C ในเทอร์มินัล

สามารถติดตามกลุ่มไฟล์ต่างๆ ได้ โดยเชื่อมโยงงานต่างๆ กับไฟล์เหล่านั้น:

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

และสำหรับกลุ่มหนึ่งสามารถดำเนินการงานเป็นชุดได้:

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

สมมติว่าคุณมีกลุ่มไฟล์ JavaScript จงทำให้ไฟล์เหล่านี้รวมกันเป็นไฟล์เดียว จากนั้นทำการย่อขนาดไฟล์นั้น จงทำให้งานนี้ดำเนินการเมื่อไฟล์ใด ๆ ของเราเปลี่ยนแปลง