سهیل ساقیان
7 سال پیش توسط سهیل ساقیان مطرح شد
4 پاسخ

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

سلام
من دوره 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. بهینه کردن فایل ها در انتها

ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 7 سال پیش مطرح شد
0

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


سجاد
تخصص : برنامه نویس
@sajaddp 7 سال پیش مطرح شد
0

سلام

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

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


سهیل ساقیان
تخصص : درحال یادگیری ...
@webeveloper 7 سال پیش مطرح شد
0

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


سجاد
تخصص : برنامه نویس
@sajaddp 7 سال پیش مطرح شد
0

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

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

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام