فلش‌کارت‌های آموزشی Gulp 4 از صفر تا پروژه: کارخانهٔ ساخت و بهینه‌سازی دارایی‌های فرانت‌اند

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره Gulp 4 از صفر تا پروژه: کارخانهٔ ساخت و بهینه‌سازی دارایی‌های فرانت‌اند

موضوع کلی: ابزارهای ساخت، خودکارسازی و بهینه‌سازی فرانت‌اند

موضوع میانی: خودکارسازی گردش کار و پردازش دارایی‌های فرانت‌اند با Gulp

📋 سرفصل‌های دوره

• 1. Gulp در خط لولهٔ ساخت فرانت‌اند: مسئله، معماری و جایگاه ابزار
• 2. آماده‌سازی Node.js، npm و محیط توسعه
• 3. راه‌اندازی پروژه و پیکربندی package.json
• 4. نصب Gulp CLI و وابستگی‌های محلی پروژه
• 5. ساختار gulpfile.js و ماژول‌سازی فایل پیکربندی
• 6. تعریف تسک‌ها با توابع و gulp.task
• 7. اجرای تسک‌ها از CLI و ساخت تسک پیش‌فرض
• 8. ترکیب تسک‌ها با series برای گردش کار ترتیبی
• 9. اجرای بهینه تسک‌ها با parallel
• 10. مدیریت وابستگی تسک‌ها و جلوگیری از اجرای تکراری
• 11. کار با Vinyl File Objects در خط لوله Gulp
• 12. درک Streamها و تفاوت آن‌ها با پردازش مبتنی بر فایل
• 13. انتخاب فایل با glob در gulp.src
• 14. نوشتن خروجی‌ها با gulp.dest و مدیریت مسیرها
• 15. مشاهدهٔ تغییرات فایل‌ها با gulp.watch
• 16. ساخت Watch تسک‌های پایدار برای توسعه
• 17. اجرای افزایشی با lastRun و کاهش زمان ساخت
• 18. ثبت رویدادها، لاگ حرفه‌ای و گزارش پیشرفت
• 19. مدیریت خطاها بدون توقف زودهنگام تسک‌ها
• 20. طراحی ساختار پوشه‌ها و جداسازی source از dist
• 21. پیکربندی محیط‌های development و production
• 22. پاک‌سازی امن پوشهٔ خروجی پیش از هر ساخت
• 23. تغییر نام و بازسازی مسیر فایل‌ها در جریان پردازش
• 24. تزریق متغیرها و جایگزینی متن در فایل‌های خروجی
• 25. کامپایل Sass و مدیریت source pathها
• 26. سازمان‌دهی partialهای Sass و ترتیب importها
• 27. تولید و اتصال Source Map برای CSS
• 28. افزودن Vendor Prefix با PostCSS و Autoprefixer
• 29. فشرده‌سازی و کوچک‌سازی CSS برای تولید
• 30. قاعده‌مند کردن CSS با Stylelint در تسک Gulp
• 31. حذف CSSهای استفاده‌نشده با PurgeCSS
• 32. استخراج Critical CSS برای بهبود نمایش اولیه
• 33. تبدیل JavaScript نوین با Babel
• 34. کنترل کیفیت JavaScript با ESLint
• 35. فشرده‌سازی JavaScript با Terser
• 36. جمع‌بندی فایل‌های اسکریپت با حفظ ترتیب وابستگی‌ها
• 37. تولید خروجی‌های جداگانه برای کتابخانه‌ها و صفحات
• 38. پردازش TypeScript و ادغام خروجی در خط لوله
• 39. اتصال Gulp به Webpack برای bundleهای پیچیده
• 40. قالب‌بندی HTML با pluginهای templating
• 41. ساخت Layoutهای مشترک و Partialهای قابل استفاده مجدد
• 42. کوچک‌سازی HTML و حذف فضای اضافی
• 43. تزریق خودکار CSS و JavaScript به HTML
• 44. بهینه‌سازی PNG، JPEG و GIF بدون افت محسوس
• 45. تولید تصاویر واکنش‌گرا با اندازه‌ها و srcset
• 46. تبدیل تصاویر به WebP و AVIF
• 47. بهینه‌سازی SVG و حذف داده‌های اضافی
• 48. ساخت SVG Sprite برای آیکون‌های پروژه
• 49. تولید و بهینه‌سازی Faviconهای چنداندازه
• 50. مدیریت فونت‌های وب و زیرمجموعه‌سازی کاراکترها
• 51. کپی هوشمند فایل‌های استاتیک بدون پردازش اضافی
• 52. نسخه‌بندی فایل‌ها با Cache Busting
• 53. ساخت Manifest برای نگاشت نام اصلی به نام نسخه‌دار
• 54. بازنویسی خودکار آدرس‌های CSS و HTML پس از نسخه‌بندی
• 55. فشرده‌سازی Gzip و Brotli برای انتقال سریع‌تر
• 56. تولید Subresource Integrity برای فایل‌های منتشرشده
• 57. راه‌اندازی BrowserSync و سرور توسعه
• 58. اتصال BrowserSync به پروژه‌های سمت سرور با Proxy
• 59. تزریق Live Reload در گردش کار توسعه
• 60. تنظیم Debounce و بهینه‌سازی Watch در پروژه‌های بزرگ
• 61. ساخت Task Factory برای تسک‌های تکراری و قابل پیکربندی
• 62. انتخاب Plugin مناسب بر اساس نگهداری، عملکرد و سازگاری
• 63. نوشتن Transform سفارشی با Through2
• 64. ساخت Plugin اختصاصی Gulp برای عملیات تکراری
• 65. ایجاد خط لوله‌های شرطی بر اساس نوع فایل و محیط اجرا
• 66. هماهنگ‌سازی Gulp با Bundlerها بدون تداخل تسک‌ها
• 67. تعریف Performance Budget و سنجش خروجی نهایی
• 68. تولید گزارش حجم، سرعت و تغییرات بیلد
• 69. اجرای خط لوله در CI و دریافت خروجی قابل اعتماد
• 70. اتصال تسک‌ها به Git Hooks برای بررسی پیش از Commit
• 71. آماده‌سازی و انتشار پوشه dist روی هاست یا CDN
• 72. مهاجرت پروژه از Gulp 3 به Gulp 4
• 73. مدیریت نسخه Node و حل تعارض وابستگی‌ها
• 74. عیب‌یابی تسک‌های کند، ناقص و دارای خطای Stream
• 75. ساخت پروژه کامل از صفر تا استقرار تولید