آموزش طراحی وب

آموزش کار با bower

در این آموزش شما شما یاد خواهید گرفت که چگونه Bower راه اندازی کنیم. شما با نصب کردن Bower با خط فرمان شروع می کنید و آنگاه یاد خواهید گرفت که چگونه از دیگر دستورات استفاده کنیم.

bower

آموزش کار با bower

یکی از مشکلات توسعه دهندگان در آغاز هر پروژه، دانلود کتابخانه های مورد نیاز است. به طور معمول برای آغاز به کار در هر پروژه ای نیاز به چند کتابخانه داریم، اما در اکثر اوغات ممکن است شما جستجو و دریافت کتابخانه ها را فراموش کنید. و از طرفی اگر از قبل کتابخانه های پر کاربرد را دریافت و ذخیره کنیم، مسئله “بروزرسانی” دردسرساز می شود.

جلسه گذشته صرفا مقدمه آشنایی با grunt و bower بود و گذر از آن مانعی ندارد. در این جلسه شما نحوه نصب و استفاده از bower را یاد خواهید گرفت.

چگونه bower را نصب کنیم ؟

برای نصب bower شما ابتدا باید nodeJS را نصب کنید (در اصل برای این آموزش ما صرفا به NPM نیاز داریم، اما با نصب nodeJS این ابزار هم نصب می شود.)

بهتر است از همین الان راه را برای جلسات بعدی هموار تر کنید، پس من پیشنهاد می کنم نسخه ۰.۱۰.۲۷ nodeJS را دریافت کنید. چون برخی از پلاگین های قدیمی Grunt (که در آینده درباره آن صحبت می کنم) هنوز با نسخه ۰.۱۲.۰ سازگار نیستند. البته بعد از آنکه به خوبی کار با Grunt را یاد گرفتید به شما نحوه نصب و استفاده از NVM را یاد خواهم داد تا به راحتی نسخه های مختلف nodeJS را به طور همزمان نصب کنید.

نصب کردن nodeJS اصلا سخت نیست، برای همین از این مرحله عبور می کنم (درصوت بروز هرگونه مشکل، سوالات خود را در بخش پرسش و پاسخ مطرح کنید.)

پیشنهاد: بهتر است به جای استفاده از خط فرمان ویندوز(CMD)، از نرم افزار های دیگر مثل git یا POWERSHELL (که به همراه کلاینت github  نصب می شود)استفاده کنید. من در جلسات آموزشی از خط فرمان git به نام git-bash استفاده می کنم. اما این نکته تاثیر چندانی در روند آموزش ندارد.

نصب bower

بعد از نصب nodeJS ترمینال یا خط فرمان را باز کرده و دستور زیر را در آن تایپ کنید.

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

کار کردن با bower چگونه است؟

ابتدا یک پوشه بسازید و وارد آن شوید، سپس با کلیک راست و انتخاب گزینه git bash here خط فرمان مخصوص git را صدا بزنید (می توانید از خط فرمان های دیگر استفاده کنید، اما باید درون خط فرمان به پوشه ای که ساخته اید اشاره کنید تا پکیج ها در آنجا نصب شوند).

جستجوی یک پکیج

شما می توانید به سادگی از طریق خط فرمان به جستجوی یک پکیج بپردازید. برای این کار ابتدا دستور search را تایپ و به دنبال آن نام پکیج مورد نظر را بنویسید. به عنوان مثال، دستور زیر به جستجوی نسخه های jquery می پردازد.

نصب یک پکیج

اگر شما نام یک پکیج را می دانید، نیازی به جستجوی آن نیست و می توانید به صورت مستقیم با استفاده از دستور زیر آنرا نصب کنید.

اگر در دستور نصب نسخه پکیج مشخص نشود bower آخرین نسخه را دریافت می کند. درضمن، پکیج ها در پوشه bower_components ذخیره می شوند.

آیا به فایل bower.json نیاز داریم؟

اگر به خاطر داشته باشید در جلسه قبلی هنگام معرفی bower به این نکته اشاره کردم که ما تقریبا نیازی به فایل bower.json نداریم. اما اگر می خواهید روی بسته ها کنترل بیشتری داشته باشید ما به فایل bower.json نیاز داریم. اما نصب بسته ها بدون استفاده از این فایل هم امکان پذیر است.

ساختار فایل bower.json

در پوشه ای که قبلا ایجاد کرده بودید فایلی با نام bower و با فرمت json بسازید، سپس با استفاده از نت پد آنرا باز کنید و موارد زیر را در آن تایپ کنید.

پارامتر های فوق به ترتیب نام پروژه، توضیحی درباره پروژه و نسخه آنرا مشخص می کند. حالا کمی دستور نصب را تغییر می دهیم.

عبارت –save-dev که در پایان دستور قرار داده شده نام پکیج نصب شده را در فایل bower.json ذخیره می کند.

حالا که فایل bower.json را ایجاد کردیم، قادر به انجام عملیات های زیر هستیم.

بروزرسانی پکیج ها

یکی از بهترین ویژگی های bower، بروزرسانی پکیج هاست که با استفاده از دستور زیر امکان پذیر است.

 حذف پکیج ها

با استفاده از دستور زیر می توانید پکیج های اضافی را حذف کنید.

 نکات دیگر

شما می توانید به صورت همزمان چند بسته را نصب، بروزرسانی و یا حذف کنید. برای اینکار به مثال زیر توجه کنید

همچنین با اجرای دستور bower list می توانید لیست پکیج های نصب شده را مشاهده کنید. البته روش دیگری هم برای نصب پکیج ها وجود دارد که چندان جالب نیست. شما می توانید نام پکیج هایتان را در فایل bower.json وارد کنید و با اجرای دستور bower install همه ی آنها را نصب کنید.

شاید به این فکر می کنید که با قطع شدن اینترنت bower قابل استفاده نیست، در حقیقت اگر یک بار پکیج را دریافت کرده باشید bower با مراجعه به کش، بسته را دریافت می کند.

حالت کش به صورت پیشفرض فعال می باشد اما شما می توانید با اضافه کردن پارامتر private به فایل bower.json این حالت را غیرفعال کنید.

 کلام پایانی

همونطور که قبلا اشاره کرده بودم، bower به اندازه grunt پیچیده نیست. برای همین سعی کردم آموزش رو در یک جلسه خلاصه کنم. در جلسه بعدی نحوه نصب grunt و فایل package.json رو توضیح میدم.

امیدوارم از مطالعه این آموزش لذت برده باشین، من مشتاقانه منتظر شنیدن نظرات ارزشمند شما هستم.

تهیه شده در مدرسه مجازی ایرانیان

محمد هادی اعظمی

من محمد هادی اعظمی، برنامه نویس و توسعه دهنده نرم افزار هستم. چهار سال است که به طور جدی در این زمینه فعالیت میکنم و با مجموعه های مختلف تحت عناوینی مثل طراح وب، توسعه دهنده نرم افزار و توسعه دهنده وب کار کرده ام.

دیدگاه ۸

  • سلام من وقتی می خوام تو خط فرمان nodejs دستور نصب bower بزنم با ارورر برخورد می کنم
    npm shoould be run outside of the node repl, in your normal shell
    :)؟

    • دوست عزیز خط فرمان اصلی سیستم عاملتون رو امتحان کنید (terminal/cmd) ولی پیشنهاد بنده اینه که از powershell استفاده کنید. به هرحال خط فرمان خود nodeJS با همه دستورات سازگار نیست (البته تحت یه شرایط خاصی سازگارمیشه)

  • سلام
    قبل از هر چیزی بابت مطالب مفید این سایت ازتون تشکر میکنم.
    بنده bower رو نصب کردم و با استفاده از اون یه پکیجی رو هم install کردم.
    مشکل من اینه که نمیدونم این پکیج در کدوم دایرکتوری نصب میشه.
    من پروژم رو در درایو D کامپیوتر سیو کردم و میخوام بدونم چطور میتونم پکیج مورد نظر رو در همون دایرکتوری پروژم نصب کنم.
    با تشکر

    • وارد دایرکتوری موردنظرتون بشید بعد کلیک راست کنید و گزینه git bash here رو انتخاب کنید و بعد دستورات لازم برای نصب پکیج رو تایپ کنید. با انجام این مرحله در دایرکتوری موردنظر پوشه ای به نام bower_components ایجاد می شود که محل نگه داری پکیج هاست.

  • ممنون از زحمت شما
    اما کاش در مطلبتون به composer و شباهت های اون با bower اشاره کرده بودید
    در واقع باور ابداع شد تا مشکل کامپوزر رو در بعضی پروژه های که vendor خارج از محدوده روت url بود رو حل کنه

  • سلام

    یه سوال : بعد از تمام این مراحل باید چیکار کرد ؟!
    مثلا فرض کنید ما bootstrap رو نصب کردیم. حالا باید بیایم تو فایل فرضا index.htmlمون بصورت دستی فایل‌های css,js بوت استرپ رو کال کنیم :

    یا راه اصولیش چیز دیگه‌ای هست ؟

    مرسی

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین