جلسه نهم – پیاده‌سازی تسک Watch برای خودکارسازی اجرای تسک‌ها

✔ Watch در Gulp 4 (نسخه فعلی)

• Watch باید یک تابع یا تسکی که با gulp.series یا gulp.parallel ساخته شده، دریافت کند.

• ساختار صحیح:

   

  export const watch = () => {
    gulp.watch("src/assets/js/*.js", minifyjs);
  };
  

✔ کاری که Watch انجام می‌دهد

بعد از اجرای دستور:

gulp watch

تمام پوشه‌های پروژه زیر نظر گرفته می‌شوند:

• هر تغییری در فایل‌های Sass → اجرای خودکار compileSass
• هر تغییری در فایل CSS → اجرای خودکار minifycss
• هر تغییری در JS → اجرای خودکار minifyjs
• هر تغییری در PUG → اجرای خودکار compilePug
• هر تغییری در HTML → اجرای خودکار copyhtml
• هر تغییری در تصاویر → اجرای خودکار minifyimg

✔ نمونه کد نهایی جلسه

export const watch = () => {
  gulp.watch("src/assets/img/*", minifyimg);
  gulp.watch("src/assets/js/*.js", minifyjs);
  gulp.watch("src/assets/sass/*.scss", compileSass);
  gulp.watch("src/assets/css/*.css", minifycss);
  gulp.watch("src/*.pug", compilePug);
  gulp.watch("src/single.html", copyhtml);
};

✔ نکات مهم

• در Gulp 4 اگر داخل watch به جای یک تابع چیز دیگری بدهیم، خطا می‌دهد:
  "watch task has to be a function"
• بهتر است Watch در کنار تسک Default اجرا شود تا با:

gulp 

همه چیز تحت نظر باشد.

✔ قرارگیری Watch در تسک Default

export default gulp.parallel(
  msg,
  minifyimg,
  minifyjs,
  compileSass,
  minifycss,
  compilePug,
  copyhtml,
  watch
);