อึก - ชม

วิธี Watch ใช้เพื่อตรวจสอบไฟล์ต้นฉบับของคุณ เมื่อมีการเปลี่ยนแปลงไฟล์ต้นฉบับนาฬิกาจะรันงานที่เหมาะสม คุณสามารถใช้งาน "ค่าเริ่มต้น" เพื่อดูการเปลี่ยนแปลงของไฟล์ HTML, CSS และ JavaScript

อัปเดตงานเริ่มต้น

ในบทที่แล้วคุณได้เรียนรู้วิธีการรวมงานโดยใช้งานเริ่มต้น เราใช้ gulp-minify-css, gulp-autoprefixer และ gulp-concatplugins และสร้างงานสไตล์เพื่อลดขนาดไฟล์ CSS

ในการดูไฟล์ CSS เราจำเป็นต้องอัปเดตงาน 'ค่าเริ่มต้น' ดังที่แสดงในโค้ดต่อไปนี้:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

ไฟล์ CSS ทั้งหมดภายใต้ work/src/styles/ โฟลเดอร์จะถูกเฝ้าดูและเมื่อมีการเปลี่ยนแปลงกับไฟล์เหล่านี้ภารกิจสไตล์จะถูกดำเนินการ

เรียกใช้งานเริ่มต้น

รันงาน 'ค่าเริ่มต้น' โดยใช้คำสั่งต่อไปนี้

gulp

หลังจากดำเนินการคำสั่งข้างต้นคุณจะได้รับผลลัพธ์ต่อไปนี้

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

เมื่อใดก็ตามที่มีการเปลี่ยนแปลงไฟล์ CSS คุณจะได้รับผลลัพธ์ต่อไปนี้

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

กระบวนการเฝ้าดูจะยังคงทำงานอยู่และตอบสนองต่อการเปลี่ยนแปลงของคุณ คุณสามารถกดCtrl+Cเพื่อยุติกระบวนการตรวจสอบและกลับไปที่บรรทัดคำสั่ง