استفاده از Webpack در طراحی قالب وردپرس

- 1 سال پیش
توسط سجاد آپدیت شد
web developer ( 512 تجربه )
1 سال پیش

سلام
من دوره webPack را دیدم و علاقه مند شدم از آن در طراحی قالب وردپرس استفاده کنم.
سوال اول این هست که درست هست این کار یا خیر ؟
سوال دوم این هست که چگونه این کار انجام شود، در کانفیگ وب پک و ماژول های مورد نیاز کاملاً گیج شدم.

در اینترنت جستجو کردم ولی نتوانستم باز به نتیجه درستی برسم:
https://www.kirstencassidy.com/incorporting-webpack-wordpress-theme-part-1/
https://bhavyanshu.me/using-bootstrap-4-webpack-3-and-yarn-for-wordpress-theme-assets/01/21/2018
https://blog.webscopeapp.com/using-webpack-wordpress/

من میخواهم از موارد زیر در طراحی قالب استفاده کنم:

  1. bootstrap 4
  2. sass
  3. استفاده از owl.carousel2
  4. بهینه کردن فایل ها در انتها
حسام موسوی ( 131414 تجربه )
1 سال پیش

ببینید webpack ربطی به wordpress یا هیچ سیستم دیگه ای نداره
یک مدیریت کننده یا همون bundler هست که برای مدیریت پروژه Client مثل فایل های css یا js یا تصاویر مورد استفاده قرار میگیره
و شما برای توسعه frontend خودتون میتونید ازش استفاده کنید

سجاد ( 10401 تجربه )
1 سال پیش

سلام

بنده با وب پک تست نکردم، ولی با gulp تنظیماتی برای خودم ساختم که سرعت کارم رو بالا ببره، شاید با بررسی پکیج هایی که استفاده کردم و استفاده از موارد مشابه برای وب پک بتونید چیزی که مد نظرتون هست رو ایجاد کنید. https://github.com/sajaddp/WordPress-Theme-with-Gulp

@حسام
فکر کنم ایشون دنبال یک کانفیگ آماده برای سرعت بخشیدن به فرآیند طراحی قالب هستند. ( چیزهایی مثل فشرده سازی فایل ها، انتقال فایل ها، ساخت پوشه dist و... )

web developer ( 512 تجربه )
1 سال پیش

ممنون جناب موسوی و سجاد
بلی من درگیر کانفیگ کردن وب پک برای پروژه هام هستم، دقیقاً دارم مانند شما همچین چیزی را آماده میکنم
ممنون که تجربه خودتان را به اشتراک گذاشتید.
به نظر شما چه موارد نیاز هست به پلاگین ها اضافه شود ؟

سجاد ( 10401 تجربه )
1 سال پیش

حقیقت بنده چند مورد به نظرم مهم بود:

  • فشرده سازی فایل های css و js
  • فشرده سازی تصاویری که استفاده میشه.
  • تولید خودکار sourcemap
  • اینکه مواردی به jquery و bootstrap از مخزن npm دریافت بشه و نیاز نباشه هربار به پروژه اضافه شوند.
  • فونت هایی که استفاده میشه چه مواردی که از مخزن گرفته میشه و چه مواردی که در خودمون در پروژه اضافه می کنیم، خودکار به محل مناسب منتقل شوند.
  • و در نهایت اینکه بشه راحت محتویات رو در پوشه ای مثل assets قرار داد و در نهایت یک خروجی راحت و بهینه گرفت.

البته یک سری نکات هم بنده به کار اضافه کردم ولی چون زیاد حالت جهان شمول نگرفت در گیت قرار ندادم، اون هم اینکه با کمک gulp-uncss اومدم خودکار قبل از گرفتن خروجی نهایی کلاس هایی که در فایل های css وجود داره ولی استفاده نشده اند حذف کردم تا خروجی نهایی css کمتر بشه. ( مثلا از حدود 600 کیلوبایت رسید به حدود 190 )

برای ارسال پاسخ باید وارد سایت شوید