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

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

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

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

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

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

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

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

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

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

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

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

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

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