دليل الشامل لأداة bower



كمطور للويب عند بدء بمشروع جديد تبدء بمهمة الروتينية نفسها، وهي تجهيز مكونات كمكتبات وأطر عمل التي يتطلبها هذا المشروع وذهاب إلى موقعها ثم تحملها وبعد تحميلها تفك ضغط عنها وأخيرا تدرجها في مجلد المشروع. وهذه العملية تتكرر لكل مكون فمثلا لو كان مشروعك بحاجة ﻟ 5 مكتبات ستكرر نفس عملية سابقة 5 مرات وتخيل لو كانت مكونات المطلوبة 10!! هل ترى كم هو حجم العمل المطلوب فقط لتحميل المُتطلّبات مشروع ما؟
لأجل تخلص من العملية الروتينية هذه ووقت الضائع نحن هنا بحاجة لإستخدام bower.

ما هو bower؟

بإختصار
Bower هو مدير حزم للويب
ربما سمعت أو أستخدمت أدوات المخصّصة لإدارة الحزم في لغات برمجة آخرى، مثل gem للغة Ruby وComposer لـPHP وnpm لـNode.js. وعمل Bower مشابه لهذه الأدوات لحد كبير.
ما يجعل من bower أداة رائعة هي أننا نستطيع تحميل وفك ضغط عن حزمة عبر كتابة أمر بسيط، وليس هذا فقط بل تحديث وحذف حزم معينة أيضا. نحن هنا إستغنينا عن كل ذالك العمل الروتيني السابق ببضع سطور قليلة، أليس هذا رائعاً؟

تثبيت bower

لتثبيت bower ستحتاج لتثبيت أولا:
  • Node.js
  • Git

لتثبيت Node.js

بالنسبة لمستخدمي Windows وMac OS يمكنهم تحميل من موقع الرسمي Node.js، وأختيار نسخة مناسبة لنظام تشغيل وتثبيتها بشكل إعتيادي.
و بالنسبة لمستخدمي Linux يمكن إتباع نفس طريقة السابقة. أو يمكنهم تحميل Node.js عبر المستودعات الخاصة بنظام التشغيل، على سبيل المثال إدا كنت تستخدم Ubuntu يمكن تثبيت Node.js عن طريق سطر الأوامر:
sudo apt-get install nodejs npm

تثبيت Git

يمكن تحميل Git بنفس الطريقة عبر موقع الرسمي وأختيار نسخة مناسبة لنظام التشغيل.
ولمستخدمي Linux يمكنهم تحميل Git عبر المستودعات الخاصة بنظام التشغيل، وفي حال إستخدامك ﻟ Ubuntuفيمكن تثبيت عبر سطر أمر التالي:
sudo apt-get install git

تثبيت bower

بعد تثبيت المتطلبات على حاسوبك، حان وقت لتثبيت bower أفتح سطر أوامر (command line) وأكتب أمر التالي
npm install -g bower
تهانينا أصبحت أداة bower جاهز لإستخدام الأن على حاسوبك

إستخدام bower

ملاحظة Bower هي أداة تستخدم عبر سطر أوامر Command Line، جميع الأوامر التي سنستخدمها ستحتاج إلى كتابتها في سطر الأوامر.
قبل بدء بإستخدام الأداة سنحتاج أولا لتحديد مجلد الذي نريد عمل عليه عبر سطر الأوامر وفليكن مجلد الذي نريده هو bowerdemo على سبيل المثال، السطر الذي سنكتبه سيكون كتالي:
cd path/to/bowerdemo
ملاحظة: أمر cd هو لتغير مسار الذي تعمل عليه أداة سطر الأوامر.

تثبيت الحزم

لتثبيت حزمة ما نستخدم أمر install مع إضافة إسم حزمة التي نريدها.
bower install jquery
الأن تم تحميل مكتبة jquery في داخل مجلد bower_components الذي أنشيء في داخل مجلد bowerdemo.
وبإضافة لإستخدام إسم الحزمة يمكن تثبيت حزم أيضا عبر:
  • عنوان مستودع Git مثل git://github.com/components/jquery.git
  • مسار مستودع Git محلي.
  • إختزال مسار معين مثل components/jquery. Bower سيفترض أن Github هو المعني هنا، في هذه الحالة، المسار هو جزء بعد github.com في مسار المستودع.
  • رابط مباشر لملف بإمتداد zip أو tar، سيتم فك ضغط عن ملف تلقائيأ بعد تحميله.

وأيضا يمكننا تحديد إصدار الحزمة التي نريد تحميلها عبر إضافة علامة # بعد إسم الحزمة ثم تحديد رقم الإصدار، على سبيل المثال مكتبة jquery إصدار 1.12.1.
bower install jquery#1.12.1
في حال لم ننحدد إصدار كما في مثال الأول bower يقوم تلقائياً بتحميل أخر إصدار للحزمة.
كما يمكننا تثبيت أكثر من حزمة واحدة في آن واحد فقط بكتابة فاصلة بين أسماء الحزم.
bower install jquery bootstrap fontawesome
هنا سعملbower على تحميل مكتبة jquery، إطار العمل bootstrap و مكتبة خطوط fontawesome معا.
وبمجرد تحميل الحزم يمكننا إستخدامها في مشروعنا الذي نعمل عليه عبر إستخدام وسم script أو link ويمكن حصول على مسارها عبر أمر تالي:
bower list --path
<link rel=”stylesheet” href=”bower-components/dist/css/bootsrap.css”/>
<link rel=”stylesheet” href=”bower-components/css/font-awesome.css”/>
<script src=”bower-components/jquery/dist/jquery.js”></script>

البحث عن الحزم

يمكننا بحث عن الحزم المتوفرة بطريقتين إما عبر تصفح مستودعات الحزم على موقع الرسمي أو عبر سطر الأوامر بإستخدام أمر search ثم إسم الحزمة.
على سبيل المثال بحثنا عن إطار foundation:
bower search foundation
الأمر تالي سيعيد لنا عديد من نتائج البحث، كل نتيجة من نتائج بحث تتضمن إسم ومسار مستودع git الخاص بكل حزمة ويمكنك إستخدامهما لتنصيب حزمة التي تريدها.

تحديث الحزم

تحديث حزم سهل جدا إذا كنت تستخدم ملف bower.json )سنتحدث عن هذا الملف بتفصيب لا حقا( يمكنك ببساطة تنفيد أمر.
bower update
هذا الأمر سيعمل على تحديث كل حزم المعرفة في ملف bower.json.
ولتحديث حزمة معية فيمكن إستخدام نفس أمر السابق يليه إسم الحزمة المراد تحديثها.
bower update jquery

حذف حزم

يمكن حذف حزمة معينة عبر أمر uninstall مع ذكر إسم حزمة التي نريد حذفها.
bower uninstall jquery

إعداد bower للإستخدام في مشروع

لإستخدام bower في مشروعك ستحتاج لملفين وهما:
  • ملف .bowerrc وهو الذي يحدد مكان تحميل الحزم.
  • ملف bower.json وهو الذي يعرف الحزم مطلوبة للمشروع.

تحديد مسار تحميل الحزم

المسار الأفتراضي لتحميل الحزم عليه في bower هو bower_components، وإذا رغبت بتغيره لمسار أخر ستحتاج لإنشاء ملف .bowerrc وتحديد مسار الذي تريده.
// .bowerrc
{
    “directory”: “libs”
}
الأن جميع الحزم ستحمل في مجلد libs الذي حددناه في ملف .bowerrc

تنصيب الحزم متعددة عبر ملف bower.json

إذا كنت تستخدم حزم متعددة في مشروعك وغالبا هذا ما تفعله فسيكون من جيد تضمين هذه الحزم في ملف bower.json. هذا سيسمح لك بتنصيب وتحديث الحزم بسطر واحد.
هناك طريقتين لإنشاء ملف bower.json الأولى هي عبر أمر bower init وهنا bower سيطرح عليك بعض أسئلة الضرورية لإنشاء الملف مع نهايتها ستحصل على الملف، وطريقة الثاني هي طريقة اليدوية عبر أي محرر نصوص.
في مثال تالي إستخدمت أمر bower init لإنشاء ملف bower.json.
{
  "name": "app-name",
  "authors": [
    "Mohamed Youssouf <mohamedyoussouf1994@gmail.com>"
  ],
  "private": true,
  "dependencies": {
    "jquery": "^2.2.3",
    "modernizr": "~2.6.2",
    "bootstrap": "^3.0.0",
    "fontawesome": "^4.0.0"
  }
المثال أعلاه هو لملف bower.json بسيط يعرف ببعض المعلومات حول المشروع ومتطلباته dependencies،
ملف bower.json مفيد في حالة عملك مع أكثر من شخص في نفس المشروع حيث أن جميع متطلبات عمل المشروع موجودة فيه ولو أراد أحد الذين يعملون معك تحميل متطلبات المشروع فكل ما عليه فعله هو تنفيد أمر
bower install
وهنا bower سيبحث عن ملف bower.json وتحميل المتطلبات فيه وبحسب الإصدارات المذكورة فيه.

الختام

أدوات إدارة الحزم مثل bower هي حل ممتاز لإدارة متطلبات مشروعك سواء كان مشروع صغير أو كبير فهي تجعل مشروعك قابلا للمشاركة مع أخرين بسهولة وتبعد عنا كثير من صداع لتحديث جميع متطلبات المشروع مستقبلا من مكاتب وأطر العمل وغيرها وتتيح لنا طريقة بسيطة لإدارة كل متطلبات المشروع بأسطر قليلة.


روابط مفيدة:

ليست هناك تعليقات:

إرسال تعليق

بكسليو - لمحترفي تصميم و تطوير الويب © 2014

يتم التشغيل بواسطة Blogger.