جلسه هشتم – کامپایل فایل‌های PUG، ساخت تسک Default و ادغام فایل‌های JS

✔ کامپایل فایل‌های PUG

• برای تبدیل فایل‌های .pug به فایل‌های HTML از پلاگین gulp-pug استفاده می‌کنیم.
• مسیر ورودی فایل‌ها:
  src/*.pug
• خروجی HTML به پوشه‌ی dist/ ارسال می‌شود.

• نمونه کد کامپایل PUG:

   

  export const compilePug = () => {
    return gulp.src("src/*.pug").pipe(pug()).pipe(gulp.dest("dist"));
  };
  

• هر بار اجرای تسک، فایل PUG تبدیل به HTML خوانا می‌شود.

✔ ادغام فایل‌های JS

• برای ترکیب چند فایل جاوااسکریپت به یک فایل، از gulp-concat استفاده می‌کنیم.
• تمام فایل‌های src/assets/js/*.js گرفته می‌شوند و در یک فایل با نام app.min.js ادغام می‌شوند.
• پس از ادغام، با gulp-uglify فایل نهایی فشرده می‌شود.
• مسیر
  dist/assets/js/app.min.js

• نمونه کد:

   

  export const minifyjs = () => {
    return gulp
      .src("src/assets/js/*.js")
      .pipe(concat("app.min.js"))
      .pipe(uglify())
      .pipe(gulp.dest("dist/assets/js"));
  };
  

✔ ساخت تسک default در Gulp v4

• در Gulp نسخه ۴ دیگر از gulp.task('default', ...) استفاده نمی‌کنیم.
• روش صحیح استفاده از export default به همراه gulp.parallel یا gulp.series است.
• وظیفه تسک default این است که چند تسک را همزمان اجرا کند.

• مثال استفاده:

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

• با اجرای دستور gulp همه‌ی این تسک‌ها به صورت موازی اجرا می‌شوند:
  • فشرده سازی تصاویر
  • فشرده سازی JS
  • تبدیل Sass → CSS
  • فشرده سازی CSS
  • کامپایل PUG
  • کپی HTML
  • نمایش پیام کنسول

✔ نکات مهم این جلسه

• export default بهترین روش برای ساخت تسک اصلی پروژه است.
• استفاده از gulp.parallel باعث اجرای همزمان چند تسک می‌شود.
• PUG هنگام خروجی گرفتن فایل HTML تمیز و خوانا ایجاد می‌کند.
• Concat کردن JS سرعت لود سایت را بهتر می‌کند چون تعداد درخواست‌ها کمتر می‌شود.