چگونه Bower را برای پروژه بعدی خود راه اندازی کنیم

چگونه Bower را برای پروژه بعدی خود راه اندازی کنیم

در این سری، ما درباره Bower بحث می کنیم و می بینیم که چگونه می توان برای بهبود در توسعه وردپرس استفاده کرد. برای پوشش این مجموعه، نگاهی به چگونگی راه اندازی Bower برای پروژه خود می اندازیم. به طور خاص، می بینیم که چگونه می توانیم نصب و به روزرسانی کنیم و اجزای مختلف را با استفاده از Bower سفارشی سازی کنیم.

در پست قبلی، درباره اینکه bower چیست و چگونه به ما در توسعه وردپرس کمک می کند بحث کردیم. در این پست، می خواهم bower را برای پروژه بعدی خود با برخی از تکنیک های پیشرفته آماده سازی کنم.

برخی از مفاهیم شبیه به Grunt است، بنابراین پیشنهاد می کنم نگاهی به پست آغاز به کار با Grunt بیندازید.

 

bower.json

کلید bower در پروژه، فایل bower.json است. این چیزی است که در طول یک bower install برای شما و دیگر مصرف کنندگان پروژه تجزیه می شود. همچنین لازم است که در وابستگی ها صرفه جویی کنیم. ولی در این مورد بعدا حرف می زنیم.

اولین چیزی که می خواهیم ایجاد کنیم یک فایل bower.json در ریشه ی پروژه خود است. پیشنهاد می کنم که حداقل از نام، توضیحات و شماره نسخه شروع کنیم.

این چیزی است که فایل شما باید این مقدار را داشته باشد:

 

نصب و راه اندازی وابستگی

حال که یک فایل bower.json داریم، حالا اجازه دهید Bootstrap را به پروژه خود اضافه کنیم. ما برای این کار در خط فرمان دستور bower install bootstrap-sass-official --save را تایپ می کنیم. این باعث می شود که یک پوشه به نام bower_components و پوشه ای به نام bootstrap-sass-official در داخل پوشه اولی ایجاد شود، همراه با به روز رسانی فایل bower.json ما.

این چیزی است که فایل شما باید این مقدار را داشته باشد:

توجه داشته باشید که وابستگی ها اضافه شده است و bootstrap-sass-official همراه با آخرین نسخه آن وجود دارد.

 

به روز رسانی اجزا یا Components

یکی از ویژگی های مورد علاقه من در bower این است که به سادگی می توانم اجزایی که در پروژه استفاده کرده این را آپدیت کنم. من معمولا سعی می کنم که از آخرین نسخه کتابخانه های خود استفاده کنم. به محض اینکه نسخه ی جدید بوت استراپ بیرون می آید، من آن را وارد پروژه خود می کنم. bower این کار را برای شما به سادگی انجام می دهد.

در مثال بالا، علامت "~" در مقابل شماره نسخه این معنی را می دهد که پروژه حداقل باید از این نسخه استفاده کند. شما همچنین می توانید پروژه خود را با استفاده از bower update استفاده کنید اگر نسخه جدیدی از کتابخانه ها منتشر شده باشد. به عنوان مثال، هنگامی که / اگر Bootstrap به نسخه 3.1.2 به روز شد، می توانید به سادگی با دستور bower update نسخه حدید را دریافت کنید.

در زیر برخی از روش هایی را مشاهده می کنید که می توانید مشخص کنید که هر اجزا از چه نسخه ای باید استفاده کند:

  • نسخه صریح – 3.1.1
  • تنها نسخه پچ – 3.1.1~
  • نسخه کوچکتر – 3.1.1^
  • آخرین نسخه – *
  • لیست کامل

 

استفاده از اجزا

حال که bootstrap را نصب کردیم، اجازه دهید در ساخت پروژه خود استفاده کنیم، به عنوان مثال در ایم پست من فقط می خواهم مقداری style به پروژه اضافه کنم، نه جاوا اسکریپت یا فونت.

اولین کاری که می خواهم انجام دهم ساخت یک فایل style.scss است که ما آن را در داخل فایل style.css در ریشه پروژه خود کامپایل می کنیم. من معمولا ساختاری شبیه به /css/sass را ایجاد می کنم و تمام فایل های scss. را داخل آن قرار می دهم. اجازه دهید پیش برویم و فایل style.scss در آنجا ایجاد کنیم.

از آنجایی که ما در حال ساخت یک تم برای وردپرس هستیم، نیاز داریم که مقداری comment در بالای آن قرار دهیم، بعد می توانیم فایل bootstrap.scss را import یا وارد کنیم. شما باید به تقریبا به شکل زیر از @import استفاده کنید:

من از grunt-contrib-sass در پروژه خود استفاده می کنم، وقتی ما Sass خود را کامپایل می کنیم، باعث می شود که فایل bootstrap.scss در داخل فایل style.css کامپایل شود. حال ما تمام style های Bootstrap را به پروژه خود اضافه کردیم.

 

سفارشی سازی اجزا یا Components

دو راه وجود دارد که اجزا خود را سفارشی کنید. من قصد دارم بر روی ظاهر طراحی متمرکز شوم. یک راه این است که style ها و دیگر شیوه نامه ها را نادیده بگیریم یا چیزهایی که در فایل .scss کامپایل می شود را کمتر کنیم. راه دیگر این که آن را پیشنهاد می کنم این است که، فایل های .scss موجود را نادیده بگیرید.

اجازه دهید نگاهی به فایل bootstrap.scss بیندازیم که در بخش قبلی به آن اشاره کردم. این اصل مهم است که فایل .scss دیگر نیاز به کامپایل دارند. اگر شما نگاهی به فایل هایی کنید که import شده اند، شما باید فایل variables.scss را در بالای آن مشاهده کنید. به عنوان یک پروژه، Bootstrap در اینجا کار بزرگی را انجام داده است، مثل استفاده مجدد رنگ ها و اندازه فونت ها.

کاری که می توانیم انجام دهیم این است که فایل bootstrap.scss را کپی کرده و در یک از فایل های .scss تم خود در پوشه css/sass قرار دهیم. وقتی این کار را انجام دادیم شاید بخواهیم مسیر تمام فایل هایی را که در نقطه bower_components قرار دارد را تغییر دهیم.

ما همچنین می توانیم فایل scss خودمان را در این فایل اضافه کنیم تا چیزهایی مثل متغیر های sass در variables.scss نادیده گرفته شوند. شاید بخواهیم رنگ پس زمینه را تغییر دهیم. متغیری در داخل فایل variables.scss بوت استراپ وجود دارد که به نام body-bg$ است، که می توانیم به سادگی در فایل variables.scss تم خود وارد کنیم.

 

هر دو مثال بالا باید به صورت زیر تغییر یابد:

به این:

این چیزی است که کمی سخت است که بدون نسخه ی  نمایشی بتوان نشان داد، پس می توان پروژه کامل را در سایت GitHub مشاهدی کنید.

 

نتیجه گیری

این نتیجه گیری این مجموعه از Bower است. ما درباره اینکه Bower چیست و چگونه به ما در هنگام توسعه وردپرس کمک می کند بحث کردیم و دیدیم که چگونه می توانیم آن راه اندازی کنیم.

Bower عملا یک ابزار برای مدیریت وابستگی ها تبدیل شده است، بنابراین امیدوارم که این سری از آموزش به شما کمک کرده باشد تا مفاهیم ابتدایی Bower را درک کرده باشید تا بتوانید در پروژه خود استفاده کنید.

 

منابع