جلسه Gulp – خلاصه

1️⃣ معرفی

• Gulp یک Task Runner است که برای اتوماسیون کارهای تکراری در پروژه وب استفاده می‌شود.
• مثال کارها: می‌نیفای کردن JS، فشرده کردن تصاویر، کپی HTML و CSS، اجرای Live Server و…

2️⃣ ساختار فایل‌ها

• gulpfile.js / gulpfile.mjs → فایل اصلی تعریف Task‌ها
  • .mjs برای ES Module
  • .js + "type": "module" در package.json هم قابل استفاده است
• src/ → فایل‌های اصلی پروژه
• dist/ → خروجی پردازش‌شده برای کاربر (مینیفای شده و آماده انتشار)

3️⃣ نصب پکیج‌ها

• Gulp اصلی: 

• npm install --save-dev gulp

• Gulp CLI: npm install -g gulp-cli

• Minify تصاویر:

•  npm install --save-dev imagemin imagemin-mozjpeg imagemin-pngquant

• Minify JS: npm install --save-dev gulp-uglify readable-stream

4️⃣ Task‌ها

a) Print Message

export const msg = async () => {
  console.log("This Is My First Task With Gulp!!!");
};

• صرفاً برای تست کارکرد Gulp.

b) Copy HTML

export const copyhtml = async () => {
  return gulp.src("src/*.html").pipe(gulp.dest("dist"));
};

• کپی تمام HTML‌ها از src به dist.

c) Minify Images

export const minifyimg = async () => {
  const files = await imagemin(["src/assets/img/*"], {
    destination: "dist/assets/img",
    plugins: [
      mozjpeg({ quality: 75 }),
      pngquant({ quality: [0.6, 0.8] })
    ],
  });
  console.log(`Minified ${files.length} images`);
};

• فشرده‌سازی تصاویر JPG و PNG
• imagemin تعداد تصاویر مینیفای شده را نمایش می‌دهد.

d) Minify JS

gulp.task("compress-js", async function () {
  return pipeline(
    gulp.src("src/assets/js/*.js"),
    uglify(),
    gulp.dest("dist/assets/js")
  );
});

• مینیفای تمام فایل‌های JS از src/assets/js/ به dist/assets/js/
• در ES Module از import به جای require استفاده می‌کنیم.

5️⃣ نکات مهم

• هنگام استفاده از ES Module: همه import باشه، require کار نمی‌کنه.
• پسوند .mjs یا "type": "module" در package.json ضروری است.
• خروجی Gulp (فایل‌های dist/) مهم است، بقیه فایل‌ها فقط برای توسعه هستند.