• شاخه: طراحی    ::    بازدید: ۲۱۳۱
  • ۳

راهنمای Bower برای مبتدیان

bower

توسعه وب مدرن عموما شامل استفاده از وابستگی‌های طرف سوم می‌شود: کتابخانه‌های CSS و پیش‌پردازنده‌هایی نظیر Bootstrap و Sass و کتابخانه‌های JavaScript نظیر jQuery و Angular و غیره.

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

شما چگونه بصورت موثر همه‌ی آنها را با وجود پروژه‌های متعدد توسعه دنبال می‌کنید؟ چگونه وابستگی‌های پروژه خود را به‌روز نگه می‌دارید؟ چگونه آنها را به روشی بروزرسانی می‌کنید که پروژه‌های قدیمی شما که ممکن است با نسخه‌های جدید سازگار نباشد، لطمه نبینند؟

مدیریت دستی تمامی وابستگی‌های پروژه بخودی خود یک کار تمام وقت است.

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

این مقاله موارد ابتدایی Bower را پوشش می‌دهد. این مقاله هدفش بر توسعه‌دهندگان front-end که Bower برایشان تازگی دارد (ولی با واسط‌های command-line آشنایی دارند) استوار است. (CLIs)

اگر با CLIs راحت نیستید، bower یک آشنایی عالی و ساده برای آنهاست (در مقایسه با اقدام مستقیم به مدیریت سرور وب خود/VPS با واسط command-line).

Bower چیست؟

ابزاری است که در نصب، بروزرسانی و مدیریت تمامی وابستگی‌های توسعه front-end به شما کمک میکند.  یک وابستگی در این مورد به معنی یک پروژه open source است که با اعتماد به آن، سایت خود را می‌سازید. مانند: Bootstrap, jQuery و Normalize.css.

Bower به npm شباهت دارد. فقط Bower به توسعه‌دهندگان front-end تعلق دارد.

نصب Bower

برای نصب Bower به موارد زیر نیاز خواهید داشت:

  • Node
  • npm (که بصورت پیش‌فرض به همراه Node است.)
  • Git

اگر هنوز Node (و npm) را نصب نکرده‌اید ممکن است بخواهید این مقاله را بخوانید: چگونه Node.js را نصب کنیم. اگر Git را هم هنوز ندارید، مقاله ما با عنوان چگونه به سرعت با Git کار کنید نوشته توبیاس گونتر (کسی که چند مورد درباره Git می‌داند، با احتساب اینکه شرکت او یکی از مشهورترین واسط‌های کاربر گرافیکی Git در بازار را ساخته است) را بخوانید.

هنگامی که Node, npm و Git حاضر شدند، Bower را با اجرای دستور زیر در ترمینال/ command prompt خود نصب کنید:

دستور بالا Bower را بصورت سراسری نصب می‌کند و در همه جا در کامپیوتر شما قابل دسترسی خواهد بود.

نکته جالب این است که دستور بالا شبیه استفاده از موزیلا فایرفاکس برای دانلود گوگل کروم میباشد. به هرحال داستان ادامه دارد.

سپس به پوشه/دایرکتوری  پروژه خود بروید. این موضوع مهم است و من می‌خواهم که آنرا در ابتدای این مقاله گفته باشم، چرا که ادامه‌ی این آموزش شما را در دایرکتوری پروژه خود فرض می‌کند. اگر چنین چیزی ندارید، کافیست یک فولدر با اسامی مانند “bower-tutorial” یا “messing-around-with-bower” و غیره در جایی از کامپیوتر خود ایجاد کرده و به آن بروید. همه اینکارها را لازم نیست که در فولدر دسکتاپ خود انجام دهید.

راهنمای داخلی

از آنجایی که احتمالا این اولین استفاده شما از Bower است، دستوری که در مرحله اول می‌خواهم در مورد آن صحبت کنم دستور help است که مستندات inline و نکات را نشان می‌دهد.

صدور دستور help بدون هیچ بحثی، تعدادی از دستورهای Bower را به شما نشان می‌دهد.

 

چنانچه می‌خواهید در مورد دستور بخصوصی از  Bower بدانید، دو روش برای آن وجود دارد.

اولین روش صدور دستور help به همراه اسم دستوری است که می‌خواهید در مورد آن بیشتر بدانید. برای مثال اگر شما بخواهید در مورد دستور prune در Bower یاد بگیرید بایستی بصورت زیر عمل کنید:

 

 

روش دیگر تایپ کردن آن دستور به همراه آپشن –help (و یا کوتاه شده آن: -h) میباشد. این روش برای نمایش راهنما زمانی مفید است که شما یک دستور Bower را تایپ کرده و ناگهان در وسط کار عملکرد آن دستور را فراموش می‌کنید و یا می‌خواهید که در مورد آپشن‌های آن قبل از صدور فرمان تحقیق کنید.

 

در مقابل دقیقا bower prune  -help را مشاهده می‌کنید فقط با این تفاوت که از نسخه کوتاه شده آپشن –help یعنی –h استفاده می‌کنیم:

 

در ضمن آپشن‌های دستور Bower معمولا نسخه‌های کوتاه‌شده‌ای برای سهولت در تایپ دارند. برای مثال آپشن –verbose به شکل –v نیز می‌تواند نوشته شود و –force به شکل –F.

یافتن بسته‌های Bower برای نصب

برای پیدا کردن بسته های Bower که می‌خواهید نصب کنید، می‌توانید از دستور جستجو به همراه یک کلید واژه و یا اسم بسته استفاده نمایید.

برای مثال برای دیدن بسته‌هایی با کلید واژه “responsive” ، دستور زیر را صادر میکنیم:

 

 

اگر اسم پروژه‌ای را که می‌خواهید نصب کنید از قبل می‌دانید و می‌خواهید در دسترس‌بودن آن به عنوان یک بسته Bower را بیابید، می‌توانید اسم آن را تایپ کنید. اسم بسته با اسم مخزن پروژه ی GitHub برابر است. برای مثال اگر در مورد بسته Bower برای HTML5 Boilerplate کنجکاو هستید و می‌دانید که اسم پروژه “html5-boilerplate” میباشد، می‌توانید تایپ کنید:

 

این دستور تمامی بسته های Bower که با اسم بسته ای که وارد کرده اید مطابقت داشته باشد، برمی‌گرداند.

 

اگر در عوض از یک واسط وب استفاده کنید، با صفحه جستجوی Bower روبرو می‌شوید.

دریافت اطلاعات یک بسته

در مثال بالا میبینید که به هنگام اجرای دستور جستجو، Bower نتایج متعددی را نشان داد. اگر در مورد بسته دلخواه خود مطمئن نیستید و یا می‌خواهید درباره یک بسته‌ی بخصوص بیشتر بدانید، دستور info به همراه اسم بسته را اجرا کنید.

بیاید برخی از اطلاعات در Bootstrap را برونداد نماییم.

 

این دستور محتوای فایل مانیفست bower .json بسته را نمایش می‌دهد (در مورد bower .json بعدا صحبت خواهیم کرد) که معمولا جزئیاتی در مورد سایت رسمی بسته و توضیحاتی در مورد پروژه و گواهینامه آن و کلیدواژه‌ها و دیگر نسخه‌های قابل دسترسی و غیره را شامل می‌شود.

 

 

نصب بسته‌های Bower

روش اصلی برای گرفتن بسته‌های Bower در پروژه خود از طریق دستور install به همراه اسم بسته‌ای که می‌خواهید نصب کنید است. تمامی بسته‌هایی که نصب می‌کنید در پوشه ای به نام bower_components  خواهند رفت که بصورت خودکار در پوشه پروژه شما ایجاد خواهد شد.

بیاید بسته jQuery را بگیریم. می‌توانیم از دستور زیر استفاده کنیم:

 

این دستور آخرین نسخه jQuery را دریافت می‌کند.

نصب یک نسخه بخصوص

بصورت پیش فرض دستور install آخرین نسخه آن بسته را دریافت می‌کند. ولی اگر تمایل به استفاده نسخه دیگری باشید، می‌توانید اسم نسخه را تصریح نمایید.

شاید شما کمی احساس ماجراجویی داشته باشید و بخواهید از یک نسخه ناپایدار (not-yet-stable) استفاده کنید. و یا شاید بخواهید از یک نسخه قدیمی‌تر استفاده کنید که با یک پروژه قدیمی که بر روی آن کار می‌کنید مطابقت دارد. و یا آزمایش مطابقت وارونه (backwards-compatibiity) را انجام می‌دهید. برای اینکار تنها نیاز به تصریح شماره نسخه به همراه (#) خواهیم داشت.

ابتدا اجرای دستور info را پیشنهاد می‌کنم تا بتوانید تمامی نسخه‌های در دسترس بسته را ببینید.

برای مثال اجرای bower info jquery نسخه‌های متعددی از jQuery  را نمایان می‌سازد.

0501-06-bower-jquery-versions

 

 

اگر می‌خواستیم  یک نسخه قدیمی نظیر نسخه 11  را نصب کنیم، از دستور زیر استفاده می‌کردیم:

 

نصب بسته Bower شخصی خودتان

بسیاری از ما از وابستگی‌های یکسانی در پروژه‌های توسعه خود استفاده می‌کنیم. و برخی از ما حتی دارای دسته‌های متعددی از وابستگی‌ها هستیم. دسته‌ای برای پروژه‌های شخصی و دسته‌ای دیگر پروژه‌های کاری.

ممکن است همیشه خود را در حال استفاده از وابستگی‌های طرف سوم در طول پروژه‌های توسعه مختلف یافته‌اید. Sass برای نوشتن CSS ، Angular برای عملکردهای front-end ،  HTNL5shiv برای پشتیبانی مرورگرهای قدیمی و غیره. نصب الگویی برای وابستگی های خود برای شما تاثیرگذارتر و قابل مدیریت خواهد بود.

اینکار را می‌توانیم با ایجاد یک بسته معمولی Bower برای خودمان انجام دهیم. اینکار شامل ایجاد یک فایل مانیفست با اسم bower .json در پوشه root پروژه خود است.

می‌توانید bower .json را بصورت دستی و با استفاده از ویرایشگر متن و یا ویرایشگر کد منبع ایجاد کنید. ولی راه مناسب برای اینکار استفاده از دستور init در command line است.

 

اجرای دستور init واکنش‌هایی برای پرکردن جزئیاتی در مورد بسته Bower شما نظیر اسم و نسخه و توضیحات آن را نشان می‌دهد.

 

 

 

اگر قبل از اجرای دستور init اقدام به نصب دیگر بسته های bower نموده باشید، Bower در مورد قرار داردن آنها به عنوان وابستگی در فایل bower .json خود از شما سوال خواهد کرد.

سپس بسته‌های دیگری را به بسته‌های Bower خودمان با تصریح آنها به عنوان وابستگی، اضافه می‌کنیم. اینکار را با اجرای دستور install با آپشن save (یا کوتاه شده آن –s) انجام می‌دهیم تا Bower متوجه وارد کردن بسته‌ای که در فایل مانیفست bower .json خودمان برای نصب قرار می‌دهیم، بکنیم.

بیایید برای قرار دادن jQuery و Normaize.css و HTML5shiv بسته را نصب کنیم.

 

 

یادداشت: برای ابزار توسعه مانند linter های کد و کمپرسور های CSS و تست های unit (بسته‌هایی که فقط در زمان توسعه استفاده می گردند) از آپشن –save-dev استفاده کنید. این بسته شما را در bower .json به عنوان وابستگی توسعه (که در فایل مانیفست شما زیر شئ devDependeces JSON دسته‌بندی می‌شوند) قرار می‌دهد.

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

اگر بخواهید فایل bower .json خود را بصورت دستی پیکربندی کنید و یا تنظیماتی فراتر از آنچه توسط  bower init ایجاد شده را بوجود بیاورید، Bower’s JSON specifications را بخوانید.

دستورهای کارامد Bower

اینجا تعداد کمی از دستورهای ابتدای وجود دارد که قطعا به شما کمک خواهد کرد. (برای مشاهده تمامی دستورهای Bower به Bower’s list of commands مراجعه کنید.)

تمامی بسته‌های Bower خود را مشاهده کنید

اگر از یک پروژه dev زمان زیادی گذشته است، دستوری که بسته‌های استفاده شده در پروژه را به شما یادآوری می‌نماید، دستور list میباشد.

 

آنچه که در مورد این دستور جالب است بررسی Bower برای هر نسخه جدیدی از بسته‌های در دسترس شما است. در پایین مشاهده می‌کنید که نسخه‌های جدیدی برای بسته‌هایی که استفاده می‌کنم وجود دارد:

0501-08-bower-list-packages

 

بروزرسانی بسته‌ها

در بدترین حالت مهم است که وابستگی‌های طرف سوم خود را به هنگام وجود وصله امنیتی بروزرسانی کنید. انجام این کار در طول تمام پروژه‌های dev خود (بصورت دستی) بسیار وقت‌گیر و خسته‌کننده و مشکل‌ساز است.

ولی با Bower تنها کافیست که دستور update را صادر کنید.

برای بروزرسانی یک بسته بخصوص تنها از دستور update به همراه اسم بسته استفاده کنید. بیایید jQuery را بروزرسانی کنیم:

 

استفاده از دستور update بدون هیچ آپشن و یا اسامی بسته باعث میشود تا Bower بروزرسانی تمامی بسته‌های منسوخ را در نظر بگیرد.

 

پاک کردن بسته های Bower

برای حذف یک بسته تنها از دستور uninstall استفاده کنید:

 

پاک کردن وابستگی ها

برای پاک کردن یک بسته از لیست وابستگی های bower .json خود، از دستور uninstall  با آپشن –save استفاده کنید:

 

نتیجه‌گیری

در این مقاله مطالب مقدمات Bower  را پوشش دادیم. این مقاله شامل موارد زیر بود:

  • نصب Bower
  • نمایش اسناد help برای دستورها و آپشن‌های Bower
  • دریافت و پیدا کردن اطلاعات در مورد بسته‌های Bower
  • نصب بسته های Bower
  • چگونگی ایجاد بسته‌های Bower شخصی
  • دیگر دستورهای مفید Bower برای مدیریت وابستگی‌های پروژه خود (لیست کردن، بروزرسانی و پاک کردن)

 

در مقاله‌های آموزشی دیگر در مورد ویژگی‌های متوسط و پیشرفته Bower نظیر تنظیمات پیکربندی Bower  خود و Bower’s Programmatic API بحث خواهیم کرد.

منبع: Bower Beginner’s Guide

امین ضیا

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

همچنین ممکن است دوست داشته باشید ...

۳ واکنش

  1. علی گفت:

    سلام و چه عالی که دوباره پستی تازه در Hive می‌بینم. باعث شادی و خوش‌حالی است!

  2. akbarjimi گفت:

    من هم یک اسلاید Bower – یک راهنما برای تازه کارها درست کردم، در این آدرس میتونید ببینید و دانلود کنید.
    http://www.slideshare.net/akbarjimi/bower-52585017

  3. اول که عنوان رو خوندم فکر کردم نوشته پاور و گفتم این که دیگه آموزش نمیخواد!!

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *