يعدُّ Yeoman (وتلفظ «يومِن» ومعناها في اللغة الأجنبية الخادم الجليل الذي يخدم النبلاء أو الشخص الذي يقدم خدمات جليلة ذات شأن) نظامًا عامًّا للسقالات يسمح بإنشاء أي نوع من التطبيقات، فهو يتيح البدء السريع في مشاريع جديدة ويبسّط صيانة المشاريع القائمة. السقالة باللغة العربية هي هيكل مؤقت يُستخدَم في حمل الأشخاص والمواد بغرض البناء؛ أمَّا في البرمجة، فينطبق التعريف تمامًا عليها أي هي منصةٌ مؤقتةٌ تُستعمَل في بناء هياكل التطبيقات للانطلاق بعملية الإنشاء بسرعة وذلك بتوليد الملفات البدائية الأساسية للمشروع أو التطبيق (الهيكل العام) الذي تود إنشاءه وفق مواصفات ومعايير تحدِّدها مما يوفر عليك الكثير من الوقت.

ويمكن القول أنَّ Yeoman محايدٌ مع لغات البرمجة أي يسمح بإنشاء مشاريع بأي لغة تريد (لغات الويب أو لغة جافا أو بايثون أو سي شارب أو غيرها).

لا يتخذ Yeoman في حد ذاته أي قرارات. تُتخَذ كل القرارات من قبل المولّدات التي هي في الأساس ملحقات في بيئة Yeoman. هناك الكثير من المولدات المتاحة كما أنّه من السهل إنشاء مولّد جديد يناسب أي سير عمل تريد. Yeoman هو دائمًا خيارك الصحيح لاحتياجات بناء التطبيقات وتوليد ملفات المشروع الابتدائية.

فيما يلي بعض حالات الاستخدام الشائعة له:

• إنشاء مشروع جديد بسرعة
• إنشاء أقسام جديدة من المشروع، مثل وحدة تحكم جديدة مع اختبارات الوحدة
• إنشاء وحدات (modules) أو حزم (packages)
• التمهيد لخدمات جديدة
• فرض المعايير والممارسات الجيّدة والدلائل النمطية
• الترويج لمشاريع جديدة من خلال السماح للمستخدمين بالبدء مع تطبيق أو مشروع نموذجي
• وغيرها من حالات الاستخدام

جدول المحتويات

حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار:

• الجزء الأول: البدء مع Yeoman
  • تثبيت yo وبعض المولدات
  • تنصيب السقالة واستخدامها عمليًا
  • أوامر yo الأخرى
  • استكشاف الأخطاء وإصلاحها
• الجزء الثاني: تنصيب سقالة Yeoman لبناء تطبيق ويب
  • بناء تطبيق نموذجي باستخدام Yeoman
  • ماذا لدينا في هذه الورشة؟
  • الخطوة 1: إعداد بيئة التطوير الخاصة بك
  • الخطوة 2: تثبيت مولّد Yeoman
  • الخطوة 3: استخدام مولّد لتنصيب سقالة حول التطبيق وبناء هيكله
  • الخطوة 4: مراجعة بنية التطبيق الذي أنشأته بواسطة Yeoman
  • الخطوة 5: معاينة تطبيقك في المتصفح
  • الخطوة 6: اختبار التطبيق بواسطة Karma و Jasmine
  • الخطوة 7: الاستفادة من التخزين المحلي لحفظ المهام (todos)
  • الخطوة 8: الاستعداد لمرحلة الإنتاج
  • ختام الورشة، تهانينا!
• المصادر

الجزء الأول: البدء مع Yeoman

يُعدُّ yo أداة سطر الأوامر في Yeoman التي تسمح بإنشاء مشاريع باستخدام قوالب السقالات (scaffolding templates، يشار إليها باسم «المولدات» [generators]). يُثبَّت yo والمولدات المستخدمة باستعمال مدير حزم نود (npm).

تثبيت yo وبعض المولدات

تأكد بدايةً من تثبيت Node.js ومدير حزمه npm على حاسوبك. نفِّذ الأمر التالي للتأكد من وجود Node.js و npm لديك:

$ nodejs -v
v8.10.0

$ npm -v
3.5.2

ننصحك بالرجوع إلى مقال تثبيت Node.js على نظام أبونتو لمزيد من المعلومات حول عملية التثبيت على نظام لينكس. أمَّا على نظام ويندوز، نقترح استخدام أداة سطر أوامر أفضل مثل cmder أو PowerShell لتجربة أفضل. يمكنك دومًا الرجوع إلى موقع Node.js الرسمي واختيار نوع نظام التشغيل لتثبيت Node.js و npm عليه.

ثبِّت بعد ذلك yo باستخدام npm عبر الأمر التالي:

npm install -g yo

بعد ذلك، تُثبَّت المولد(ات) اللازم(ة)، والتي تكون عبارة عن حزم npm تسمى بالشكل generator-XYZ، إذ XYZ هو اسم المولِّد. ابحث عنها على في هذه الصفحة أو عن طريق تحديد خيار قائمة "تثبيت مولد" (install a generator) أثناء في سطر الأوامر yo. إن أردت تثبيت المولد webapp مثلًا، نفِّذ الأمر التالي:

npm install -g generator-webapp

قد يواجه مستخدمو Node و npm الجدد مشكلات متعلقة بالأذونات. تظهر هذه المشكلات في شكل أخطاء EACCESS أثناء التثبيت. ارجع إلى دليل npm لإصلاح الأذونات إذا حدث لك هذا.

تنصيب السقالة واستخدامها عمليًا

سنستخدم المولِّد generator-webapp الذي ثبَّتناه للتو في أمثلتنا أدناه. استبدل بالاسم webapp (الذي هو XYZ) اسم المولد الخاص بك للحصول على نفس النتيجة.

من أجل تنصيب السقالة في مشروعك الجديد، نفِّذ الأمر التالي:

yo webapp

ستطرح أغلب المولّدات مجموعة من الأسئلة من أجل تخصيص المشروع الجديد؛ هل تذكر المواصفات والمعايير التي أخبرتك آنفًا بها لتخصيص بها مشروعك؟ ها هي عمليًا. لمعرفة الخيارات المتاحة، استخدم أمر المساعدة :

yo webapp --help

تعتمد الكثير من المولدات على أنظمة البناء (تعرف بأنها «أدوات بناء» أيضًا) مثل Gulp أو Grunt، ومديري الحزم مثل npm و Bower. تأكد من زيارة موقع المولّد لتتعلّم كيفية تشغيل التطبيق الجديد وصيانته. يمكنك الوصول بسهولة إلى الصفحة الرئيسية للمولّد بتنفيذ الأمر التالي:

npm home generator-webapp

من المرجّح أن توفر إطارات العمل المعقدة للسقالات مولدات إضافية لبناء الأجزاء الصغيرة من المشروع. يشار إلى هذه المولدات عادةً بالمولدات الفرعية (sub-generators)، ويمكن الوصول إليها كما يلي: generator:sub-generator.

لنأخذ المولِّد generator-angular مثالًا. يمكن بمجرد إنشاء تطبيق angular بالكامل إضافة ميزات أخرى. لإضافة وحدة تحكم جديدة إلى المشروع، شغِّل المولد الفرعي لوحدة التحكم:

yo angular:controller MyNewController

أي أن عمل السقالة لا تقتصر على بناء التطبيق توليد ملفاته الأولية، بل إضافة مزايا وعناصر إليه.

أوامر yo الأخرى

بخلاف الأساسيات التي غطّيناها في القسم السابق، يعد yo أيضًا أداة تفاعلية بالكامل. ستوفر كتابة yo ببساطة في الطّرفية قائمة من الخيارات لإدارة كل ما يتعلق بالمولدات: التشغيل والتحديث والتثبيت والمساعدة وغيرها من الأدوات.

تُوفّرyo أيضا الأوامر التالية:

• yo --help: تمكنك من الوصول إلى شاشة المساعدة الكاملة
• yo --generators: تعطي قائمة بكل المولدات المثبتة
• yo --version: للحصول على الإصدار

استكشاف الأخطاء وإصلاحها

يمكن إيجاد معظم المشكلات بتنفيذ الأمر:

yo doctor

سيشخِّص الأمر doctor خطوات لحلّ المشكلات الأكثر شيوعًا.

الجزء الثاني: تنصيب سقالة Yeoman لبناء تطبيق ويب

أصبحت الآن جاهزًا لبناء تطبيق ويب كامل الوظائف من البداية بالاستعانة بمنصة Yeoman و FountainJS. سيُكتَب نموذج التطبيق في React أو Angular1 أو Angular2.

ليس لديك أي فكرة عن React أو Angular؟ لا بأس، سوف نرشدك. ومع ذلك، فإننا نفترض أن لديك تجربة سابقة مع لغة جافاسكريبت.

بناء تطبيق نموذجي باستخدام Yeoman

سيكون نموذج تطبيق الويب الذي ستنشئه تنفيذًا لمشروع إطار عمل يسمى TodoMVC. ستتمكن من إضافة عناصر مهام لإنجازها (todos) أوحذفها، أو ترشيحها، وسنضيف معًا ميزة لحفظها في وضع عدم الاتصال.

ماذا لدينا في هذه الورشة؟

سنبني تطبيق TodoMVC أعلاه من الصفر. كل خطوة سوف تُبنَى على التي تسبقها، لذلك سننتقل من خلال كل خطوة تلو الأخرى:

• الخطوة 1: إعداد بيئة التطوير الخاصة بك
• الخطوة 2: تثبيت مولّد Yeoman
• الخطوة 3: استخدام مولّد لتنصيب سقالة حول التطبيق وبناء هيكله
• الخطوة 4: مراجعة بنية التطبيق الذي أنشأته بواسطة Yeoman
• الخطوة 5: معاينة تطبيقك في المتصفح
• الخطوة 6: اختبار التطبيق بواسطة Karma و Jasmine
• الخطوة 7: الاستفادة من التخزين المحلي لحفظ المهام (todos)
• الخطوة 8: الاستعداد لمرحلة الإنتاج

سوف تستغرق هذه الخطوات حوالي 25 دقيقة لإتمامها. في الختام، سيكون لديك تطبيق TodoMVC أنيق وسوف يكون جهاز حاسوبك معدًّا لإنشاء المزيد من تطبيقات الويب الرائعة في المستقبل.

جاهز؟ لنبدأ مع الخطوة الأولى!

الخطوة 1: إعداد بيئة التطوير الخاصة بك

ستكون معظم تفاعلاتك مع Yeoman عبر سطر الأوامر. نفّذ الأوامر في الطّرفية إذا كنت تستخدم نظام التشغيل Mac أو في الصدفة shell في نظام لينكس أو في واجهة cmder (وهي المفضلة) أو PowerShell أو cmd.exe إذا كنت تستخدم نظام التشغيل ويندوز.

تثبيت المتطلبات الأساسية

قبل تثبيت Fountain Webapp Generator، ستحتاج إلى ما يلي:

• الإصدار السادس من Node.js أو ما بعده.
• الإصدار الثالث من npm أو ما بعده (والذي يأتي مرفقًا مع Node)
• نظام التحكم بالإصدارات Git

يمكنك أن تتحقق مما إذا كان لديك Node و npm مثبتين بكتابة ما يلي:

node --version && npm --version

إذا كنت بحاجة إلى ترقية Node أو تثبيته، فإن أسهل طريقة هي استخدام المثبت في نظامك الأساسي. نزِّل حزمة "msi." بالنسبة لنظام ويندوز أو "pkg." لنظام التشغيل Mac من موقع NodeJS ثم ثبِّتها. وإذا كنت تستخدم نظام لينكس، يمكنك تنزيل أحدث إصدار من صفحة التنزيل في الموقع الرسمي.

يكون مدير الحزم npm مدمجًا مع Node، رغم أنّك قد تحتاج إلى تحديثه. وتأتي بعض إصدارات Node مع الإصدارات القديمة بدلاً من npm. يمكنك تحديث npm باستخدام هذا الأمر:

npm install --global npm@latest

يمكنك التحقق من تثبيت Git من خلال كتابة ما يلي:

git --version

إذا لم يكن لديك Git، حمّل أداة التثبيت من الموقع الرسمي. إن كان نظام التشغيل لديك هو أحد توزيعات ديبيان من لينكس، فنفِّذ الأمر التالي لتثبيت Git:

sudo apt install git

تثبيت أدوات Yeoman

بمجرد تثبيت Node، ثَبِّت أيضًا مجموعة أدوات Yeoman عبر تنفيذ الأمر التالي:

npm install --global yo

هل هناك أخطاء؟

إذا واجهت أي أخطاء في الأذونات أو الوصول، مثل خطأ EPERM أو EACCESS، فلا تستخدم sudo كحلّ بديل. تستطيع الاستفادة من هذا الدليل. ويمكنك أيضًا الإطلاع على هذا المقال لمعلومات أوسع حول عملية التثبيت.

التحقق من نجاح عملية التثبيت

من المستحسن التحقق من تثبيت كل شيء كما هو متوقع عبر تنفيذ أوامر Yeoman شائعة الاستخدام مثل yo مع الراية version-- كالتالي:

yo --version

إصدارات أدوات CLI التي تعمل معها هذه الورشة البرمجية

تتغير التكنولوجيا بسرعة! لقد نُفِّذت هذه الورشة التعليمية باستخدام الإصدار 1.8.4 من سطر الأوامر yo. إذا كنت تواجه مشكلات في إصدار أحدث، فسيسعدنا أن نعرف عنها. يمكنك فتح تذكرة في GitHub للإبلاغ بأي مشكلة.

الخطوة 1: تثبيت مولد Yeoman

ستحتاج في سير عمل تطوير الويب التقليدي إلى قضاء الكثير من الوقت في إعداد الشيفرة المتداولة (boilerplate code) الخاص بتطبيق الويب الذي تعمل عليه، وتنزيل التبعيات، وإنشاء بنية مجلد الويب الخاصة بك يدويًا. ولكن مولّدات Yeoman ستسهّل عليك المهمّة كثيرًا! لنثبِّت مولّدًا لمشاريع FountainJS.

تثبيت المولّد

يمكنك تثبيت مولدات Yeoman باستخدام الأمر npm وهناك أكثر من 3500 مولد متاح الآن، وكثير منها كتبه أفراد مجتمع المصادر المفتوحة.

ثبِّت المُولِّد generator-fountain-webapp باستخدام هذا الأمر:

npm install --global generator-fountain-webapp

سيبدأ هذا بتثبيت حزم Node المطلوبة للمولد.

تذكير: إذا واجهت أي أخطاء في الأذونات أو الوصول، مثل خطأ EPERM أو EACCESS، فلا تستخدم sudo كحلّ بديل. تستطيع الاستفادة من هذا الدليل.

في الوقت الذي تستخدم فيه npm install مباشرة، يمكنك البحث عن المولدات عبر قائمة Yeoman التفاعلية. نفِّذ الأمر yo وحدِّد Install a generator للبحث عن المولدات المنشورة.

الخطوة 3: استخدام مولّد لتنصيب سقالة حول التطبيق وبناء هيكله

لقد استخدمنا كلمة «سقالة» مرات عديدة وشرحنا معناها في بداية هذا الدليل لكن قد ما تزال غريبة بعض الشيء. تعني السقالة، بالمفهوم المستخدم في Yeoman للكلمة (وفي عالم البرمجة عمومًا)، إنشاء ملفات لتطبيق الويب الخاص بك وفق معايير ومواصفات تضبطها أنت. سترى في هذه الخطوة كيف يمكن لـ Yeoman إنشاء ملفات خاصة بمكتبتك أو إطارك المفضل، مع خيارات لاستخدام مكتبات خارجية أخرى مثل Webpack و Babel و SASS وربطها بمشروعك، بأقل جهد ممكن.

إنشاء مجلد المشروع

أنشئ مجلدًا باسم mytodo ليحوي جميع ملفات المشروع الذي سنعمل على بنائه:

mkdir mytodo && cd mytodo

هذا المجلد هو المكان الذي سيولِّد المولد فيه ملفات مشروعك الابتدائية (أي هيكل المشروع).

الوصول للمولدات عبر قائمة Yeoman

نفِّذ الأمر yo لرؤية المولدات الخاصة بك:

yo

إذا كان لديك عدد قليل من المولدات المثبتة، فستتمكن من الاختيار بشكل تفاعلي منها. اختر المُولِّد Fountain Webapp لتشغيله.

استخدام المولدات مباشرة

عندما تستأنس أكثر بسطر الأوامر yo، ستفضّل تشغيل المولِّد مباشرةً دون استخدام القائمة التفاعلية (وضغط المزيد من الأزرار) على النحو التالي:

yo fountain-webapp

إعداد المولد الخاص بك

توفر بعض المولدات إعدادات اختيارية لتخصيص تطبيقك مع مكتبات مطوّري البرامج المشتركة لتسريع الإعداد الأولي لبيئة التطوير الخاصة بك.

يوفر المولد FountainJS بعض الخيارات لكي تستخدم ما تفضله:

• إطار العمل (React أو Angular2 أو Angular1)
• وحدة الإدارة (Webpack أو [SystemJS] أو لا شيء إذا كنت تستعمل Bower)
• معالج أولي لشيفرة جافاسكربت (Babel أو TypeScript أو لا شيء)
• معالج أولي لشيفرة CSS ‏(SASS أو LESS أو لا شيء)
• ثلاثة نماذج للتطبيق (صفحة هبوط وصفحة "مرحبا بالعالم" [hello world] ونموذج TodoMVC)

سوف نستخدم لهذه الورشة الخيارات التالية:

• React
• Webpack
• Babel
• SASS
• نموذج Redux TodoMVC

حدّد هذه الخيارات على التوالي باستخدام مفاتيح الأسهم ثم زر "إدخال" واستمتع بما يحدث على الشاشة.

سيبني Yeoman تلقائيًا هيكل تطبيقك ويولد لك جميع الملفات الابتدائية الأساسية له، وسيجلب كل الاعتماديات (dependencies) الخاصة به. بعد بضع دقائق، سنكون مستعدين للانتقال إلى الخطوة التالية.

الخطوة 4: مراجعة التطبيق الذي بناه Yeoman

افتح المجلّد mytodo الخاص بك لإلقاء نظرة على ما جرى بناؤه إلى الآن. يجب أن يبدو مثلما توضحه الصورة التالية:

لدينا في مجلد المشروع المجلدات الفرعية التالية:

• src: مجلّد رئيسي لتطبيق الويب
  • app: شيفرة React و Redux
  • index.html: ملف html الرئيسي
  • index.js: نقطة الدخول لتطبيق TodoMVC
• conf : مجلّد رئيسي لملفات الضبط الخاصة بالأدوات الخارجية (Browsersync و Webpack و Gulp و Karma)
• gulp_tasks و gulpfile.js: مهام أداة البناء Gulp
• babelrc. و package.json و node_modules: الضبط والاعتماديات المطلوبة
• gitattributes. و gitignore.: ملفات ضبط Git

أنشِئ الإيداع (commit) الأول في المستودع

الآن وبعد التوليد والتثبيت، يجب أن يكون لديك مستودع git جديد مهيأ بالفعل. يمكنك الإيداع فيه بأمان لحفظ الحالة الراهنة من خلال هذه الأوامر:

git add --all && git commit -m 'First commit'

الخطوة 5: استعرض تطبيقك في متصفّح الويب

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

تشغيل الخادم

شغّل سكربت npm لإنشاء خادم http محلي يستند إلى Node على localhost:3000 (أو 127.0.0.1:3000 بالنسبة لبعض التكوينات) بتنفيذ الأمر التالي:

npm run serve

افتح لسانًا جديدًا في متصفحك وانتقل إلى العنوان 3000:localhost:

إيقاف الخادم

إذا احتجت في أي وقت إلى إيقاف الخادم، فاستخدم الاختصار Ctrl + C لإنهاء عملية سطر الأوامر الحالية.

ملاحظة: لا يمكنك تشغيل أكثر من خادم http واحد على نفس المنفذ (3000 افتراضيًا).

مراقبة ملفاتك

افتح محرر النصوص الذي تفضّله وابدأ في إجراء التغييرات. سيفرض كل حفظِ لملفاتك تحديث المتصفح تلقائيًا إذ لا يتعين عليك القيام بذلك بنفسك. يُطلق على هذا إعادة التحميل المباشر وهي طريقة رائعة لتعاين حالة تطبيقك في الوقت الفعلي وعكس التغييرات مباشرةً على المتصفح دون أن تفعل أي شيء.

تُوَّفر لتطبيقك عملية إعادة التحميل المباشر (Live reloading) من خلال مجموعة من مهام Gulp التي يتم إعدادها في الملف gulpfile.js و Browsersync التي يتم إعدادها في الملف gulp_tasks/browsersync.js؛ فهي تراقب التغييرات التي تطرأ على ملفاتك وتعيد تحميلها تلقائيًا في المتصفح في حالة اكتشاف تغيير ما.

فيما يلي أدناه، حرّرنا الملف Header.js القابع في المجلّد src/app/components. بفضل التحديث المباشر، تظهر التغييرات مباشرةً في المتصفح وهذه صورة قبل إجراء أي تعديل:

وصورة بعد إجراء تعديل (تغيير عنوان التطبيق) وحفظ الملف:

لا تنس الاختبار!

لديك تطبيق TodoMVC مجرّب وأنت تقوم بتغيير العنوان. يتعيّن عليك تعديل الاختبار في mytodo/src/app/components/Header.spec.js أو التراجع عن التغيير للتثبت من عملية إعادة التحميل المباشر.

الخطوة 6: الاختبار باستخدام Karma و Jasmine

إذا لم يكن Karma مألوفًا لديك، فهو برنامج اختبار شيفرات جافاسكربت أي إطار عمل محايد للاختبار. أمّا إطار الاختبار Jasmine فهو مدمج في المولد fountainjs. عندما نفّذنا الأمر yo fountain-webapp في وقت سابق من هذا الدليل، قام المولد بتوليد الملفات ذات النمط spec.js.* في المجلد المصدري لمجلد المشروع mytodo، وأنشأ الملف conf/karma.conf.js، ثم سحب وحدات Node إلى Karma. سنحرّر سكربت Jasmine لوصف الاختبارات قريبًا ولكن دعنا نرى كيف يمكننا إجراء الاختبارات أولًا.

تشغيل اختبارات الوحدة

دعنا نعود إلى سطر الأوامر ونوقف الخادم المحلي قسرًا باستخدام الاختصار Ctrl + C. يوجد بالفعل سكربت npm أُدرِج في الملف package.json الخاص بنا لإجراء الاختبارات. يمكن تشغيله على النحو التالي:

npm test

ينبغي أن تنجح جميع الاختبارات.

تحديث اختبارات الوحدة

ستجد اختبارات الوحدة مهيّأة في المجلد src، لذلك افتح الملف src/app/reducers/todos.spec.js. هذا هو اختبار الوحدة للمخفض (reducer) الخاص بـ Todos. على سبيل المثال، نركز على الاختبار الأول الذي يتحقق من الحالة الابتدائية. (ملاحظة: على ويندوز، قد تحتاج إلى إضافة 127.0.0.1 localhost إلى الملف etc/hosts):

it('should handle initial state', () => {
  expect(todos(undefined, {})).toEqual([
    {
      text: 'Use Redux',
      completed: false,
      id: 0
    }
  ]);
});

واستبدل هذا الاختبار بما يلي:

it('should handle initial state', () => {
  expect(todos(undefined, {})).toEqual([
    {
      text: 'Use Yeoman', // <=== هنا
      completed: false,
      id: 0
    }
  ]);
});

عندما نعيد تنفيذ الاختبارات عبر الأمر npm test، ينبغي أن نرى أن الاختبارات تفشل في هذه الحالة.

ملاحظة: إذا كنت تريد تشغيل الاختبارات تلقائيًا بعد إجراء أي تعديل، يمكنك استخدام npm run test:auto بدلًا من ذلك.

افتح src/app/reducers/todos.js ثم ضع الشيفرة التالية مكان الحالة الابتدائية (initial state):

const initialState = [
  {
    text: 'Use Yeoman',
    completed: false,
    id: 0
  }
];

رائع! لقد أصلحت الاختبار:

تسهِّل كتابة اختبارات الوحدة (unit tests) تحديد الأخطاء كلّما أصبح تطبيقك أكبر فأكبر وكلّما انضمّ المزيد من المطورين إلى فريقك. تجعل ميزة الاعتماد على السقالة (scaffolding) في Yeoman كتابة اختبارات الوحدة أسهل، لذا لن يكون لك عذر إذا لم تكتب اختباراتك بيديك! ;-)

الخطوة 7: الاستفادة من التخزين المحلي لحفظ المهام (todos)

دعنا نعيد النظر في مشكلة العناصر التي لا تثبت (تعاد إلى حالتها الأولية) عندما يُحدَّث المتصفح من خلال تطبيق mytodo مع React/Redux.

تنويه: إذا لم يكن الثبات والتخزين المحلي مشكلةً بالنسبة لك أو كان وقتك ضيقًا، فيمكنك تخطي هذه الخطوة والانتقال مباشرة إلى الخطوة 8، "الاستعداد للإنتاج".

تثبيت حزمة npm

يمكننا استخدام وحدة Redux أخرى تسمى "redux-localstorage" تتيح لنا تنفيذ التخزين المحلي بسرعة وسهولة. نفِّذ الأمر التالي لتثبيتها:

npm install --save redux-localstorage@rc

استخدام redux-localstorage

يجب إعداد مخزن Redux وضبطه لاستخدام التخزين. افتح الملف src/app/store/configStore.js واحذف كل محتواه وضع الشيفرة التالي مكانه:

import {compose, createStore} from 'redux';
import rootReducer from '../reducers';

import persistState, {mergePersistedState} from 'redux-localstorage';
import adapter from 'redux-localstorage/lib/adapters/localStorage';

export default function configureStore(initialState) {
  const reducer = compose(
    mergePersistedState()
  )(rootReducer, initialState);

  const storage = adapter(window.localStorage);

  const createPersistentStore = compose(
    persistState(storage, 'state')
  )(createStore);

  const store = createPersistentStore(reducer);
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers').default;
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

إذا عاينت تطبيقك في المتصفح، سترى أن هناك عنصرًا واحدًا "Use Yeoman" في قائمة مهام todo. يعمل التطبيق على تهيئة مخزن مهام todos إذا كانت مساحة التخزين المحلية فارغة ولم نضف فيها أي عناصر حتى الآن.

جرب إضافة بعض العناصر إلى القائمة:

الآن عندما تُحدِّث المتصفح، نلاحظ أن العناصر موجودة وثابتة. أمرٌ جيدٌ!

يمكننا التأكّد من ثبات بياناتنا في التخزين المحلي عبر التحقق من لوحة الموارد (Resources) في أدوات المطور Chrome DevTools واختيار Local Storage في الجانب الأيسر:

اكتب اختبارات الوحدة

تريد تحديًا إضافيًا؟ حسنًا لك ذلك؛ أعد زيارة اختبارات الوحدة في الخطوة 6 وفكّر في كيفية تحديث اختباراتك الآن إذ تستخدم الشيفرة التخزين المحلي.

الخطوة 8: الاستعداد لمرحلة الإنتاج

هل أنت مستعد لعرض تطبيقك الجميل؟ دعنا نحاول بناء نسخة جاهزة للإنتاج نستطيع تسليمها للعميل مثلًا.

تحسين الملفات من أجل الإنتاج

لإنشاء نسخة نهائية من تطبيقنا، نحتاج إلى:

• فحص الشيفرة بحثا عن أي أخطاء محتملة عبر الأداة lint.
• تجميع واختصار السكريبتات والأنماط الخاصة بنا لحفظها.
• تفسير أي مُخرَجات للمعالجات الأولية (preprocessors) التي نستخدمها.
• وإجمالًا جعل تطبيقنا رشيقًا.

ما يثير الدهشة هو أننا نستطيع فعل كل ما سبق فقط بتنفيذ الأمر البسيط التالي:

npm run build

إنّ تطبيقك الرشيق الجاهز للإنتاج متوفرٌ الآن في المجلد dist في جذر مجلد المشروع mytodo الخاص بك. هذه هي الملفات التي يمكنك وضعها على خادمك باستخدام FTP أو أي خدمة نشر أخرى.

بناء ومعاينة التطبيق الجاهز للإنتاج

هل تريد معاينة تطبيقك الجاهز للإنتاج محليًا؟ إليك مجرد سكربت npm بسيط آخر:

npm run serve:dist

سيعمل على بناء مشروعك وإطلاق خادم ويب محلي. إنّه رائع حقًّا!

ختام الورشة، تهانينا!

كما ترى، يمكن أن يتيح لك Yeoman الكثير والمزيد من الأدوات الخيارات، فيدعم تنصيب السقالات بناء تطبيقات Angular وبعض الإطارات الأخرى التي لم نتطرق لها هنا.

على سبيل المثال، يدعم مولد Fountain Angular كذلك إنشاء أنابيب (pipes) وتوجيهات (directives) وخدمات (services) ومكونات (components) جديدة لك. يمكن توليد مكونات جديدة ببساطة وسهولة عبر تنفيذ الأمر: yo fountain-angular2:component componentName، والذي سيؤدي إلى إنشاء ملف المكون الخاص بك وإضافة شيفرة componentName.spec.js جديدة لاختبار الوحدة أيضًا.

العثور على المزيد من المولدات الفرعية

يمكنك في أي وقت استخدام الأمر: yo --generators للاطلاع على جميع المولدات الفرعية لمولدات Yeoman المثبَّتة.

وماذا بعد ذلك؟

• Yeoman دائم التطور. احرص على زيارة الموقع yeoman.io للحصول على مزيد من المعلومات ومتابعة Yoman@ على تويتر لمواكبة المستجدات.
• ساعدتنا مولدات Fountain على كتابة هذا التطبيق Todo بسرعة وأناقة. تابع YeomanFountain@ للبقاء على اطلاع على الميزات الجديدة والإصدارات الجديدة.
• React هو مكتبة جافا سكريبت لبناء واجهات المستخدم. اطلع على توثيق React في موسوعة حسوب للتعرف على هذه المكتبة أكثر.
• Angular2 إطار عمل للتطوير على كافة المنصّات.
• Webpack عبارة عن وحدة مجمعة (module bundler) نموذجية تأخذ الوحدات النمطية ذات الاعتماديات وتولد أصول ثابتة (static assets) تمثل تلك الوحدات. *JSPM حزمة إدارة متصفح. حمّل أي تنسيق للوحدة (ES، و AMD، و CommonJS، وglobals) مباشرة من أي سجل مثل npm و GitHub مع إدارة تبعية حديثة الإصدار (flat versioned dependency management).

هذا كل ما ينبغي ذكره الآن بخصوص Yeoman.

المصادر

• Getting Started With Yeoman
• Let's Scaffold A Web App With Yeoman

Lighthouse هو أداة مُؤَتمتة (Automated) مفتوحة المصدر لتحسين صفحات الويب. يمكن تطبيق الأداة على أي صفحة ويب سواء كانت عامّة أو تحتاج للاستيثاق (Authentication). يمكن استخدام الأداة للتدقيق في الأداء، قابليّة الوصول (Accessibility)، صفحات الويب التقدميّة (Progressive web apps) وغيرها.

تستطيع تشغيل Lighthouse من أدوات المُطوّر في Chrome أو سطر الأوامر أو بصيغة وحدة Node. تستقبل الأداة Lighthouse رابط URL لتدقيقه فتُشغِّل سلسلة من التدقيقات على الصفحة ثم تولّد تقريرًا عن حالة الصفحة. اعتمد على التقرير واستخدم التدقيقات التي أخفقت فيها الصفحة دليلا لكيفية تحسينها. يوجد في كلّ تدقيق توثيق مرجعي يشرح أهميّة التدقيق وكيف تصلح الصفحة لتتوافق معه.

البداية

اختر سير عمل Lighthouse الذي يناسبك:

• أدوات التطوير في Chrome. دقّق الصفحات التي تحتاج الاستيثاق بسهولة واقرأ التقارير بصيغة مفهومة للمستخدم.
• عبر سطر الأوامر. أتمت تشغيلات Lighthouse بسكربتات Shell.
• وحدة Node. ادمج Lighthouse في نظام التكامل المستمر (Continuous integration) الخاصّ بك.

ملحوظة: تتطلّب كل واحدة من طرق العمل في Lighthouse وجود Google Chrome مثبَّت على جهازك.

شغّل Lighthouse من أدوات تطوير Chrome

يشغّل Lighthouse لوحة Audits في أدوات تطوير Chrome. اتبع الخطوات التالية لتشغيل تقرير:

1. نزّل Google Chrome للأجهزة المكتبية.
2. استخدم Google Chrome لتصفّح الصفحة التي تودّ تدقيقها. يمكنك تدقيق أي صفحة على الوِب.
3. افتح أدوات التطوير DevTools في Chrome.
4. انقر على اللسان Audits.
   
5. يظهر في يسار الشاشة الإطار المعروض من الصفحة التي ستُدقَّق. تظهر في اليمين لوحة التدقيقات (Audits) التي يشغّلها Lighthouse.
6. انقر على Perform an audit. تظهر أدوات التطوير قائمة بتصنيفات التدقيق. اتركها جميعا مُعلَّمة.
7. انقر على Run audit. يعطيك Lighthouse بعد 60 إلى 90 ثانية تقريرًا عن الصفحة.
   

تثبيت سطر أوامر Node وتشغيله

اتبع الخطوات التالية لتثبيت وحدة Node:

1- نزّل Google Chrome للأجهزة المكتبية.

2- ثبّت الإصدار طويل الدعم الحالي من Node.

3- ثبّت Lighthouse. يشير الخيار ‎-g إلى تثبيت الوحدة على مستوى النظام.

npm install -g lighthouse

4- نفّذ الأمر التالي لتنفيذ تدقيق:

lighthouse <url>

5- لعرض خيارات التدقيق:

lighthouse --help

تشغيل وحدة Node برمجيا

راجع استخدام هذا الرابط لمثال على تشغيل Lighthouse برمجيًّا على صورة وحدة Node.

تشغيل Lighthouse عن طريقة إضافة Extension على Chrome

ملحوظة: يُفتَرض استخدام خطة سير عملا مبنية على أدوات المطوِّر في Chrome بدلا من هذه الإضافة، إلا إذا كان لديك سبب خاصّ. تُوفّر أدوات المطوّر في Chrome نفس الفوائد التي توفّرها الإضافة، علاوةً على كون الأدوات لا تحتاج لتثبيت.

اتبع الخطوات التالية لتثبيت الإضافة:

1. نزّل Google Chrome للأجهزة المكتبية.
2. ثبّت إضافة Lighthouse من مخزن إضافات Chrome.

اتبع الخطوات التالية لتشغيل تدقيق:

1. استخدم Google Chrome لتصفّح الصفحة التي تودّ تدقيقها.
2. انقر أيقونة Lighthouse. يُفتَرَض أن توجد الأيقونة بعد شريط العنوان في Chrome. إن لم تكن هناك، افتح القائمة الرئيسية في Chrome وانقر على الأيقونة في أعلى القائمة. تتمدّد قائمة Lighthouse بعد النقر على الأيقونة.
   
3. انقر على الزرّ Generate report. يدقّق Lighthouse الصفحة النشطة ثم يفتح لسانًا جديدًا يحوي تقريرًا عن نتائج تدقيق الصفحة.
   

شارك التقارير واعرضها على الشبكة

استخدم Lighthouse Viewer (عارض Lighthouse) لعرض التقارير ومشاركتها على الشبكة.

شارك التقارير بصيغة JSON

يحتاج Lighthouse Viewer إلى مُخرج بصيغة JSON من تقرير Lighthouse. تشرح الخطوات أدناه كيفية الحصول على مُخرج بصيغة JSON، حسب طريقة العمل التي اخترتها.

• بالنسبة لأدوات التطوير: انقر على تنزيل التقرير (السهم المتّجه إلى الأسفل).

• سطر الأوامر:

        lighthouse --output json --output-path <path/for/output.json>
  

   

• إضافة Chrome: انقر على زرّ التصدير Export ثم Save as JSON.

لمعاينة بيانات التقرير:

1. افتح Lighthouse Viewer في متصفّح Chrome.
2. اسحب ملف JSON إلى العارض ثم أفلته، أو انقر في أي مكان في العارض لفتح متصفّح الملفّات لديك واختيار الملفّ.

مشاركة التقارير عبر GitHub Gists

إن لم تكن ترغب في تمرير تقاريرك يدويّا بصيغة ملفات JSON فيمكنك مشاركتها بسريّة عبر خدمة GitHub Gists. أحد فوائد الخدمة هو الحصول على تحكّم مجاني في الإصدارات Version control.

اتبع الخطوات التالية لتصدير التقارير إلى GitHub Gists عبر إضافة Lighthouse على Chrome:

1. انقر على Export ثم Open In Viewer. يُفتَح التقرير في العارض المتوفّر على الرابط https://googlechrome.github.io/lighthouse/viewer/.
2. انقر على المشاركة Share في العارض. ستطلُب منك نافذة منبثقة في المرة الأولى السماح بالوصول إلى بياناتك الأساسية على GitHub، وصلاحية القراءة والكتابة على GitHub Gists.

أنشئ Gist يدويًّا ثم انسخ التقرير بصيغة JSON وألصقه، إن أردت تصدير التقرير إلى GitHub Gists من سطر الأوامر. يجب أن ينتهي اسم Gist الذي يحوي مُخرَج JSON باللاحقة lighthouse.report.json. راجع هذا الرابط لمثال على كيفية توليد مُخرَج JSON من سطر الأوامر.

اختر إحدى الطريقتيْن التاليّتين لعرض تقرير محفوظ على GitHub Gists: .

• أضف ‎?gist=<ID>‎ إلى رابط العارض، حيثُ ID هو معرّف Gist: https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>‎
• افتح العارض وألصق فيه رابط Gist

المساهمة في Lighthouse

Lighthouse مفتوح المصدر، ويرحّب مطوّروه بالمساهمة فيه. تحقّق من متتبّع المشاكل Issues tracker في المستودع للعثور على علل (Bugs) يمكنك إصلاحها، أو تدقيقات يمكنك إنشاؤها أو تحسينها. يعدّ متتبّع المشاكل مكانا جيّدا للنقاش حول قياسات التدقيق أو أفكار لتدقيقات جديدة أو أي أمر آخر له علاقة بأداة Lighthouse.

ترجمة - بتصرّف - للمقال Lighthouse من موقع مطوّري Chrome.

تتوفر عدِّة «أدوات بناء» (build tools) تعمل على تسهيل عملية تطوير مواقع الويب وأتمتة المهام الروتينية مثل «تصغير» (minify) ملفات JavaScript و HTML و CSS والصور، وتحويل ملفات LESS و SASS إلى CSS، والتحقق مباشرةً من صحة البنية اللغوية لملفات JavaScript والكثير من الأمور التي ستغيّر من طريقة عملك وتجعلها أكثر سرعةً وكفاءة.

سنشرح في درسنا هذا إحدى أدوات البناء المشهورة وهي الأداة Gulp بالإضافة إلى أساسيات استخدامها، شرحًا مدعمَّا بالأمثلة العملية.

ملاحظة مهمة: هذا الدليل كتب من أجل الإصدار 3 من Gulp وهنالك بعض الاختلافات والتغييرات الجوهرية في الإصدار 4. لذلك، إن كنت تستعمل الإصدار 4، فهذا الدليل ليس لك لأنه هنالك بعض الدوال والواجهات البرمجية التي لن تعمل مع ذلك الإصدار.

ما هي أداة البناة Gulp؟

أدوات البناء هو أمر حديث العهد ولم ينتشر إلا منذ بضعة سنوات. كانت ملفات ‎.sh التي تكتب بلغة Bash أحد أشهر أدوات البناء غير المباشرة وغير المخصصة المستعملة آنذاك لكتابة التعليمات وأتمتة بعض المهام الروتينية المحدودة مثل مراقبة الملفات وتحديثها. هذه الملفات تعمل مع الصدفة shell التي تأتي مدمجة مع أنظمة التشغيل.

انتشرت أدوات بناء أخرى مثل Ant و Gradle ولكنهما كانتا ضمن عالم جافا وتحتاجان إلى استعمال لغة XML لضبطهما وهي اللغة التي لا يحبها مطوري الويب عدا عن تعلم لغة جديدة لا يألفونها. اللغة التي يحبها مطورو الويب هي جافاسكربت وهنا جاءت أداتا البناء Gulp و Grunt لسد هذه الفجوة.

تتفوق أداة البناء Gulp على منافستها Grunt بأنها أسرع بكثير لأنها تنفذ المهام على التوازي (على عكس Grunt) كما أنها تمرر الملفات المفتوحة عبر مجاري Streams داخلية. أضف إلى ذلك أن اللغة المستعملة في ضبط مهام Gulp هي جافاسكريبت بالتأكيد وهي اللغة التي يحبها مطورو الويب كثيرًا.

المتطلبات المسبقة

سيجري العمل على نظام التشغيل أوبنتو 18.04 ويجب أن تكون قد ثبَّت Node.js و npm مسبقًا. إن لم تكن Node.js مثبتةً لديك، فابدأ بتثبيتها هي ومدير الحزم npm عبر الأمر التالي:

sudo apt update
sudo apt install nodejs

للتحقق من عملية التثبيت (وللتأكد من الإصدار المثبت مسبقًا لديك)، نفذ الأمر التالي:

nodejs --version

يجب أن ترى ناتجًا شبيهًا بالناتج التالي:

v8.10.0

ولتكون قادرًا على تنزيل وتثبيت حزم npm، تحتاج إلى تنزيل npm (مدير حزم Node.js) إن لم يكن مثبَّتًا لديك:

sudo apt install npm

تحقق من عملية التثبيت (أو الإصدار المثبت مسبقًا) عبر الأمر التالي:

npm --version

يجب أن ترى ناتجًا شبيهًا بالناتج التالي:

3.5.2

أنت الآن جاهز لإكمال هذا الدليل!

تثبيت Gulp

يمكن تثبيت Gulp عبر مدير الحزم npm الذي تحدثنا عنه منذ قليل، بشكل سهلٌ للغاية فكل ما عليك فعله هو تنفيذ الأمر الآتي في سطر الأوامر لتثبيت Gulp 3 لعموم النظام:

npm install gulp@3.9.0 

ثم عليك تهيئة مجلد المشروع الذي ستعمل عليه. نفِّذ الأمر الآتي في مجلد المشروع:

npm init

عليك الآن تثبيت Gulp في المشروع وإضافته إلى الاعتماديات (أي devDependencies):

npm install --save-dev gulp

أصبح Gulp مثبتًا في مشروعك وجاهزًا للاستخدام.

البنية الهيكلية للمشروع الذي سنعمل عليه

مرونة Gulp تسمح لنا باستخدامه بغض النظر عن بنية المجلدات التابعة للمشروع، كل ما يلزمك هو فهمٌ صحيحٌ كاملٌ لآلية عمله مما يسمح لك بتعديله لتلبية احتياجاتك. سنعتمد في مقالتنا البنية الآتية للمجلدات:

  |- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json

هذه بنيةٌ بسيطة نستعمل فيها مجلد app لاحتواء ملفات التطوير، بينما المجلد dist (اختصار للكلمة «distribution») سيحتوي على الملفات الإنتاجية.

كتابة أول مهمة من مهام Gulp

عندما نُشغِّل Gulp من سطر الأوامر، فسيبحث عن وجود الملف gulpfile.js في مجلد المشروع. سيُخبِر هذا الملف Gulp ما هي الإضافات التي يجب تحميلها وما هي المهام التي يجب القيام بها. علينا إذًا إنشاء الملف gulpfile.js وتضمين gulp في بدايته كما يلي:

var gulp = require('gulp');

عبارة require السابقة ستخبر Node أن تبحث في مجلد node_modules عن حزمة باسم gulp، وعند العثور عليها فستُسنَد محتوياتها إلى المتغير gulp. يمكننا الآن البدء بكتابة «مهمّة Gulp» (أي Gulp task) بالاستفادة من المتغير gulp. البنية الأساسية لمهمّة Gulp هي:

gulp.task('task-name', function() {
  // سنضع الشيفرات هنا
});

task-name تشير إلى اسم المهمّة، والتي ستُستعمَل في أي مكانٍ تريد تشغيل هذه المهمّة فيه. نستطيع تشغيل هذه المهمة بتمرير اسمها كوسيط للأمر gulp في سطر الأوامر (أي تنفيذ gulp task-name). لنجرِّب ما سبق بإنشائنا للمهمّة hello في ملف gulpfile.js السابق (الذي يحتوي على عبارة require) والتي ستطبع الجملة Hello World:

gulp.task('hello', function() {
  console.log('Hello World');
});

يمكننا تشغيل هذه المهمة بتنفيذ الأمر gulp hello في سطر الأوامر، لا تنسَ الانتقال إلى مجلد المشروع (عبر الأمر cd في لينكس أو ماك، أو dir في ويندوز) قبل تنفيذ الأمر. مخرجات الأمر السابق هي:

user@linuxbox:~/gulp-test$ gulp hello
[18:34:41] Using gulpfile ~/gulp-test/gulpfile.js
[18:34:41] Starting 'hello'...
Hello World
[18:34:41] Finished 'hello' after 127 μs

حسنًا، لا تكون مهام Gulp بهذه البساطة، حيث تحتوي عادةً على دالتين تابعتين للكائن gulp بالإضافة إلى استخدام إضافة (plugin) أو أكثر من إضافات Gulp. هذا مثالٌ عن البنية العامة لمهمّات Gulp:

gulp.task('task-name', function () {
  //الحصول على الملفات التي يجب إجراء عمليات عليها
  // gulp.src باستخدام الدالة
  return gulp.src('source-files')
    .pipe(aGulpPlugin()) // ومن ثم تمريرها إلى إضافة
    .pipe(gulp.dest('destination')) // وإخراج الملف إلى المجلد الهدف
})

كما هو واضح، تتطلب المهام المفيدة في gulp دالتين هما gulp.src و gulp.dest. الدالة gulp.src تخبر Gulp ما هي الملفات التي يجب تطبيق المهمة عليها، بينما الدالة gulp.dest تخبر Gulp أين يجب إخراج الملفات بعد تنفيذ المهمّة.

يَستخدم Gulp المجاري (streams) التي توفرها node.js، وهذا يسمح بتمرير البيانات التي ستُعالَج عبر الأنابيب (pipes) وهذا ما تفعله الدالة ‎.pipe()‎؛ لشرحٍ تفصيليٍ عن المجاري في node.js، فأحيلك إلى هذه المقالة.

سنشرح كيفية الاستفادة من Gulp عبر استعماله لتحويل ملفات Sass إلى ملفات CSS.

تحويل ملفات Sass إلى CSS عبر Gulp

نستطيع استخدام إضافة باسم gulp-sass لتحويل ملفات Sass إلى CSS. عليك تثبيت الإضافة gulp-sass في مشروعك باستخدام الأمر npm install كما فعلنا سابقًا مع gulp.

يفضل أيضًا استخدام الخيار ‎--save-dev لكي تُضاف الحزمة gulp-sass إلى devDependencies في ملف package.json وهذا يسهل نسخ الملف إلى مشروع آخر وتثبيت نفس الاعتماديات (عبر الأمر npm install فقط):

npm install gulp-sass –save-dev

علينا الآن تضمين الحزمة gulp-sass عبر require من مجلد node_modules كما فعلنا أول مرة مع gulp كي نتمكن من استخدام الإضافة:

var gulp = require('gulp');
// gulp-sass تضمين إضافة
var sass = require('gulp-sass');

يمكننا استخدام gulp-sass بوضع الدالة sass()‎ بدلًا من aGulpPlugin()‎ في المثال السابق. ولمّا كان الغرض من المهمّة هو تحويل ملفات Sass إلى CSS فلنسمِّها sass:

gulp.task('sass', function(){
  return gulp.src('source-files')
    .pipe(sass()) // gulp-sass استخدام إضافة
    .pipe(gulp.dest('destination'))
});

علينا توفير ملفات مصدرية بصيغة sass -ومجلد لإخراج الناتج فيه- إلى المهمّة sass، لنبدأ بإنشاء الملف styles.scss في مجلد app/scss، ومن ثم سنضع مسار هذا الملف في الدالة gulp.src في مهمّة sass. ونريد أيضًا إخراج ملف styles.css النهائي إلى مجلد app/css الذي سيكون هو مجلد الوجهة (destination) لدالة gulp.dest.

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

سنختبر المهمّة sass الآن للتأكد من عملها عملًا صحيحًا، لكن قبل ذلك علينا استخدام دالة من دوال Sass ضمن ملف styles.scss.

// styles.scss
.testing {
  width: percentage(5/7);
}

إذا نفَّذتَ الأمر gulp sass في سطر الأوامر، فيجب أن يُنشَأ الملف styles.css في مجلد app/css، مع تبديل الدالة percentage(5/7)‎ وتحويلها إلى 71.42857%‎.

/* styles.css */
.testing {
  width: 71.42857%; 
}

تحققنا أنَّ المهمّة sass تعمل بشكلٍ سليم. أحيانًا نحتاج إلى بناء أكثر من ملف ‎.scss وتحويلها إلى ملفات CSS في نفس الوقت، وسنحتاج حينها إلى استخدام «محارف التحديد» (Globs).

محارف التحديد في Node

تسمح لك محارف التحديد بتمرير أكثر من ملف إلى الدالة gulp.src، وهي شبيهة بالتعابير النمطية (regular expressions) لكنها تُستعمَل خصيصًا لمسارات الملفات.

عند استخدامك لمحرف تحديد (glob) فسيتحقق جهازك من أسماء الملفات والمسارات المُحدَّدة بالنمط المستخدم، فإن تمت مطابقة النمط فسيُضاف الملف إلى الدالة gulp.src.

أغلبية الأنماط التي نستعملها مع Gulp تنضوي تحت لواء الأنماط الآتية:

1. النمط ‎*.scss: رمز النجمة * هو محرفٌ خاصٌ يُطابِق أيّة ملف في المجلد المعيّن. وفي مثالنا ستُطابَق جميع الملفات التي تنتهي باللاحقة ‎.scss في المجلد الرئيسي للمشروع.
2. النمط ‎**/*.scss: هذه حالةٌ أعم من المثال السابق، حيث ستتم مطابقة أيّة ملفات تنتهي باللاحقة ‎.scss في المجلد الرئيسي للمشروع وفي جميع المجلدات الفرعية الموجودة فيه.
3. النمط ‎!not-me.scss: الرمز ! يعني أنَّ على Gulp استثناء هذا النمط من الملفات المُحدَّدة، وهذا مفيدٌ إن شئتَ أن تستثني ملفًا من التحويل؛ وفي مثالنا سنستثني الملف not-me.scss.
4. النمط ‎*.+(scss|sass): إشارة الزائد + والأقواس ()‎ ستسمح لأداة Gulp بمطابقة عدِّة أنماط معًا، والتي سيُفصَل بينها بمحرف الخط العمودي |. وفي مثالنا سيُطابِق Gulp جميع الملفات التي تنتهي باللاحقة ‎.scss أو ‎.sass في المجلد الرئيسي للمشروع.

بعد تعلمنا لمحارف التحديد، أصبح بإمكاننا وضع التعبير app/scss/**/*.scss بدلًا من app/scss/styles.scss، وبهذا ستُطابَق جميع الملفات التي لها اللاحقة ‎.scss في المجلد app/scss أو أيّ مجلدٍ فرعيٍ موجودٍ داخله.

gulp.task('sass', function() {
  // scss الحصول على جميع الملفات التي تنتهي باللاحقة
  // app/scss والموجودة في المجلد
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
})

سيُضمَّن أيّ ملف Sass موجود في مجلد app/scss تلقائيًا في مهمّة sass المُعدَّلة. فلو أضفتَ ملف print.scss إلى المشروع، فستلاحظ توليد الملف print.css في مجلد app/css تلقائيًا. حسنًا، تمكّنا من تحويل جميع ملفات Sass إلى ملفات CSS بأمرٍ وحيد، لكن السؤال الآن هو: ما الفائدة من المهمّة التي أنشأناها إن كنا سنحتاج إلى تطبيق الأمر gulp sass يدويًا في كل مرة نرغب فيها بتحويل ملفات Sass إلى CSS؟ لحسن الحظ، يمكننا أن نخبر Gulp أن يُشغِّل المهمّة sass تلقائيًا في كل مرة يُحفَظ فيها أحد تلك الملفات، وهذا ما ندعوه «المراقبة» (watching).

مراقبة التغييرات في ملفات Sass

يوفِّر لنا Gulp الدالة watch لمعرفة إن حُفِظَ أحد الملفات. الشكل العام لدالة watch هو:

gulp.watch('files-to-watch', ['tasks', 'to', 'run']); 

إذا أردنا مراقبة جميع ملفات Sass وتشغيل المهمّة sass عندما يحفظ أحد تلك الملفات، فعلينا أن نضع app/scss/**/*.scss بدلًا من files-to-watch ونضع ['sass'] بدلًا من ['tasks', 'to', 'run']:

gulp.watch('app/scss/**/*.scss', ['sass']); 

وفي أغلبية الأوقات سنحتاج إلى مراقبة أكثر من نوع من الملفات في آنٍ واحد، ويمكننا إنشاء مجموعة من عمليات المراقبة مع بعضها ضمن مهمّة باسم watch:

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // عمليات المراقبة الأخرى
})

إذا جرّبتَ تنفيذ الأمر gulp watch الآن، فسترى أنَّ Gulp قد بدأ مراقبة الملفات فوريًا.

user@linuxbox:~/gulp-test$ gulp watch
[21:10:00] Using gulpfile ~/gulp-test/gulpfile.js
[21:10:00] Starting 'watch'...
[21:10:00] Finished 'watch' after 12 ms

وأنَّ Gulp سيُنفِّذ المهمّة sass عندما تحفظ أحد ملفات ‎.scss، جرِّب الآن فتح الملف styles.scss السابق وإضافة أيّ شيء إليه وحفظه، ثم انظر إلى ناتج Gulp:

abd@linuxbox:~/gulp-test$ gulp watch
[21:10:00] Using gulpfile ~/gulp-test/gulpfile.js
[21:10:00] Starting 'watch'...
[21:10:00] Finished 'watch' after 12 ms
[21:12:03] Starting 'sass'...
[21:12:03] Finished 'sass' after 69 ms

ما رأيك أن نخطو خطوةً إلى الأمام ونجعل Gulp يُعيد تحميل الصفحة عندما نحفظ أحد ملفات ‎.scss لكي يظهر تأثير تغيير الصفحة مباشرةً على المتصفح، وذلك بالاستعانة بأداة Browser Sync.

تحديث الصفحة آنيًا باستخدام Browser Sync

يُسهِّل Browser Sync من تطوير الويب بإنشاء خادوم ويب الذي يساعدنا على تحديث الصفحات آنيًا عند تغييرها. وله ميزاتٌ أخرى، مثل مزامنة الأحداث بين أكثر من جهاز. لنبدأ أولًا بتثبيت الأداة Browser Sync كالمعتاد:

npm install browser-sync –save-dev

علينا بعدئذٍ أن نُضمِّن Browser Sync عبر التعليمة require:

var browserSync = require('browser-sync').create();

سنحتاج إلى إنشاء مهمّة باسم browserSync للسماح لأداة Gulp بتشغيل خادوم ويب باستخدام Browser Sync، ولأننا سنُنشِئ خادوم ويب، فعلينا أن نُحدِّد للخادوم ما هو المجلد الرئيسي للموقع، والذي هو في حالتنا المجلد app:

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

علينا أيضًا تغيير المهمّة sass قليلًا لكي يتمكن Browser Sync من تحديث أنماط CSS في المتصفح عندما تُشغَّل المهمّة sass:

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') 
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

انتهينا الآن من ضبط الأداة Browser Sync، لكن علينا تشغيل المهمّتَين watch و browserSync في نفس الوقت لكي تُحدَّث الصفحة آنيًا.

من غير المقبول فتح نافذَتي سطر أوامر وتشغيل gulp browserSync في إحداها و gulp watch في الأخرى، لذا لنجعل Gulp يشغِّلهما معًا بإخبار المهمّة watch أنَّه يجب إكمال المهمّة browserSync قبل السماح بتنفيذ watch.

يمكننا فعل ذلك بتمرير وسيطٍ ثانٍ إلى المهمّة watch. الشكل العام هو:

gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
  // ...
})

وفي حالتنا هذه سنضيف المهمّة browserSync:

gulp.task('watch', ['browserSync'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // عمليات المراقبة الأخرى
})

علينا أيضًا أن نتأكد أنَّ المهمّة sass ستعمل قبل watch لكي يتم تحويل أيّة ملفات sass حُفِظَت قبل تشغيل Gulp إلى ملفات CSS.

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // عمليات المراقبة الأخرى
});

إذا شغَّلتَ gulp watch في سطر الأوامر، فسيُشغِّل Gulp المهمّتين sass و browserSync ثم بعد إكمالهما ستُشغَّل المهمّة watch. ستجد في الناتج رابط URL شبيه بالرابط الآتي http://localhost:3000 الذي إذا فتحته في نافذة المتصفح، فسترى صفحة app/index.html التي يجب أن يكون محتواها شبيهًا بما يلي:

<!doctype html>
<html>
<head><link rel="stylesheet" href="css/styles.css"></head>
<body></body>
</html>

شغِّل الآن المتصفح وادخل إلى الرابط السابق وستعرض أمامك صفحة فارغة، ولتجربة التحديث الآني للصفحة، فافتح ملف styles.scss وأضف لونًا للخلفية (مثلًا: body {background-color: red;} واحفظ الملف وستجد أنَّ الصفحة قد حُدِّثَت تلقائيًا!

ما رأيك الآن أن نضيف قليلًا على المهمّة السابقة ونراقب تغيير ملفات HTML أو JavaScript (بالإضافة إلى ملفات ‎.sass) ومن ثم إعادة تحميل الصفحة حينها؟

يمكننا فعل ذلك بإضافة عمليتَي مراقبة، واستدعاء الدالة browserSync.reload عند حفظ الملف:

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 

  // تحديث الصفحة عند حفظ هذه الملفات
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload); 
});

حتى الآن قمنا بثلاثة أمور:

1. تشغيل خادوم ويب للتطوير
2. تحويل ملفات Sass إلى CSS
3. إعادة تحميل الصفحة في المتصفح عند حفظ الملفات

سنشرح في القسم الآتي كيفية تحسين الملفات الملحقة بصفحات الويب، وسنبدأ بتحسين ملفات CSS و JavaScript.

تحسين ملفات CSS و JavaScript

يُجري المطورون مهمّتَين عندما يحاولون تحسين ملفات CSS و JavaScript: تصغير الملفات وجمعها في ملفٍ واحد. إحدى المشاكل التي يواجهها المطورون عند أتمتة هذه العملية هي الصعوبة في جمع السكربتات بترتيبٍ صحيح. لنقل أننا أضفنا 3 وسوم script في صفحة index.html:

<body>
  <script src="js/lib/a-library.js"></script>
  <script src="js/lib/another-library.js"></script>
  <script src="js/main.js"></script>
</body>

هذه السكربتات موجودة في مجلدين مختلفين، ومن الصعب جمعها باستخدام الإضافات التقليدية مثل gulp-concatenate؛ لكن لحسن الحظ، تأتي إضافة gulp-useref لتحل لنا هذه الإشكالية.

تجمع إضافة gulp-useref أيّ عدد من ملفات CSS أو JavaScript إلى ملفٍ وحيد بالبحث عن تعليق يبدأ بالتعبير ‎<!--build:‎ وينتهي بالتعبير <‎!--endbuild--‎> الشكل العام له هو:

<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

النوع <type> يمكن أن يكون إما js أو css أو remove. من الأفضل تحديد نوع type للملفات التي تحاول جمعها؛ وإذا ضَبطتَ type إلى remove فسيَحذف Gulp الشيفرةَ المُحدَّدةَ ولن يولِّد ملفًا. أما <path> فيشير إلى مسار الملف الذي سيولّد.

إذا أردتَ أن يكون ملف JavaScript المولَّد في مجلد js باسم main.min.js فستبدو الشيفرة كالآتي:

<!--build:js js/main.min.js -->
  <script src="js/lib/a-library.js"></script>
  <script src="js/lib/another-library.js"></script>
  <script src="js/main.js"></script>
<!-- endbuild -->

لنضبط الآن إضافة gulp-useref في ملف gulpfile.js. علينا أولًا تثبيت الإضافة ثم تضمينها في الملف. نفِّذ الأمر الآتي للتثبيت:

npm install gulp-useref –save-dev

أضف السطر الآتي إلى ملف gulpfile.js:

var useref = require('gulp-useref');

تهيئة المهمّة useref شبيهة بتهيئة المهام الأخرى التي أنجزناها من قبل. هذه هي الشيفرة:

gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

إذا شغّلتَ مهمّة useref الآن فسيأخذ Gulp ملفات JavaScript المُحدَّدة وسيجمعها في ملف dist/js/main.min.js.

لكن الملف لم يُصغَّر (minified) إلى الآن، وعلينا استخدام إضافة gulp-uglify لفعل ذلك. وسنحتاج أيضًا إلى إضافة تدعى gulp-if لكي نُصغّر ملفات JavaScript دونًا عن غيرها. تثبيت الإضافة:

npm install gulp-uglify --save-dev 

الشيفرة التي سنضيفها إلى ملف gulpfile.js:

var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');

gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    // JavaScript التصغير إذا كان الملف
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulp.dest('dist'))
});

يجب أن يولِّدَ Gulp الملفَ main.min.js في كل مرة تشغِّل فيها المهمّة useref. إحدى الأمور الرائعة التي لم أخبرك عنها بعد هي أنَّ إضافة gulp-useref ستحوِّل جميع السكربتات الموجودة بين ‎<!--build:‎ و <‎!--endbuild--‎> إلى ملف JavaScript وحيد الذي يُشير إلى js/main.min.js وذلك في صفحة index.html، أي أنَّ ملف index.html الناتج سيكون شبيهًا بما يلي:

<!doctype html>
<html>
<head></head>
<body>
    <script src="js/main.min.js"></script>
</body>
</html>

سنستعمل نفس الطريقة لجمع ملفات CSS:

<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/another-stylesheet.css">
<!--endbuild-->

يمكننا أيضًا تصغير ملف CSS الناتج، لكننا بحاجة إلى تثبيت الإضافة gulp-cssnano:

npm install gulp-cssnano

الشيفرة التي سنضيفها إلى ملف gulpfile.js:

var cssnano = require('gulp-cssnano');

gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    // CSS التصغير إذا كان الملف
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
});

ستحصل الآن على ملف CSS وملف JavaScript وحيد ومُصغّر في كل مرة تُشغِّل فيها المهمّة useref.

تحسين دعم المتصفحات لخاصيات CSS وشيفرة JavaSctipt

نبدأ بتحسين دعم خاصيات CSS عبر مختلف المتصفحات. فمن المؤكد أنك رأيت شيفرة CSS مكتوبة بالشكل التالي:

.navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

ولابد أنك استصعبت - أثناء كتابة شيفرة CSS - البحث عن دعم كل خاصية من خاصيات CSS لمختلف المتصفحات وتساءلت عن وجود أداة تضيف السوابق الخاصة بدعم الخاصيات في المتصفحات الأخرى مثل ‎-webkit-box و ‎-ms-flexbox. الحل بسيط جدًا وهو استعمال الإضافة gulp-autoprefixer الموجودة لهذا الغرض. نفذ الأمر التالي لتثبيت هذه الإضافة:

npm install gulp-autoprefixer --save-dev

أضف السطر الآتي إلى ملف gulpfile.js:

const autoprefixer = require('gulp-autoprefixer');

تهيئة واستعمال هذه الإضافة - مع الإضافة gulp-sass والإضافة browser-sync التي تحدثنا عنهما في الأعلى - يكون بالشكل التالي:

gulp.task("styles", function() {
  gulp
    .src("app/css/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer({
        // دعم آخر إصدارين للمتصفح
        browsers: ["last 2 versions"] 
      })
    )
    .pipe(gulp.dest("css"))
    .pipe(browserSync.stream());
});

نحصل بذلك على شيفرة CSS السابقة عند كتابة:

.navigation {
  display: flex
}

فقط لتصبح الشيفرة مدعومة على كافة المتصفحات التي لا تدعم خاصيات CSS محدَّدة مثل التي رأيناها للتو.

ملاحظة: إن أردت استعمال الإضافة gulp-autoprefixer مع الإضافة gulp-cssnano (وإضافات أخرى)، فيمكنك استعمالهما سوية عبر استعمال الإضافة gulp-postcss. تمرر هذه الإضافة شيفرة CSS إلى عدة إضافات مع تحليل الشيفرة مرةً واحدةً مما يزيد من سرعة تنفيذ العملية.

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    // CSS تحديد الإضافات المراد استعمالها مع شيفرة 
    var plugins = [
        autoprefixer({browsers: ['last 2 version']}),
        cssnano()
    ];
    return gulp.src('app/css/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

اطلع على توثيق الإضافة الرسمي لمزيد من الأمثلة وكيفية الاستخدام.

ننتقل الآن إلى تحسين دعم شيفرة JavaScript وأتحدث الآن عن دعم ميزات ES6 عبر مختلف المتصفحات. الحقيقة أن الميزات التي يوفرها الإصدار ES6 (أو ECMAScript 6) مغرية جدًا لجميع مطوري الويب ولكن نقص الدعم في مختلف المتصفحات والإصدارات القديمة هو من أكبر العقبات أمام الاستفادة من تلك الميزات. انطلاقًا من ذلك، جاءت فكرة وجود محول يدعى transpiler والذي يحول من لغة برمجية معينة إلى برمجية أخرى (في حالتنا من ECMAScript 6 إلى ES2015 أو ما قبلها). المحول الذي سنختاره هنا هو المحول الشهير Babel JS الذي يحوي الكثير من الميزات والمدعوم بقوة من قبل المجتمع.

سنستعمل الإضافة gulp-babel لهذا الغرض. ثبت الإضافة عبر الأمر التالي:

# Babel 6
npm install --save-dev gulp-babel
# Babel 7
npm install --save-dev gulp-babel@next @babel/core

أضف الشيفرة التالية إلى ملف gulpfile.js:

var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("app/js/*.js")
    // تحويل الشيفرة إلى الإصدار الأقدم
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

تنبيه: احرص على استدعاء babel()‎ قبل إجراء أية عملية تصغير أو ضغط على شيفرة JavaScript.

تحسين الصور

أظن أنك ستتوقع أننا سنحتاج إلى تثبيت إضافة لمساعدتنا في موضوع تحسين الصور، وهي gulp-imagemin. الضغط الذي ستوفره هذه الإضافة هو الضغط غير الفَقُود (lossless compression).

npm install gulp-imagemin –save-dev

يمكننا تصغير صورة png و jpg و gif وحتى svg باستخدام إضافة gulp-imagemin. لننشِئ مهمّة images لهذا الغرض:

var imagemin = require('gulp-imagemin');

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/images'))
});

ولأن كلُّ نوعٍ من أنواع الصور سيُحسّن بطريقةٍ مختلفة، فربما ترغب بإضافة بعض الخيارات إلى imagemin لتخصيص كيفية تحسين الصورة. على سبيل المثال، يمكننا إنشاء صورة GIF متداخلة (interlaced) بضبط قيمة الخيار interlaced إلى ture.

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
  .pipe(imagemin({
      interlaced: true
    }))
  .pipe(gulp.dest('dist/images'))
});

إن كانت تريد إجراء عملية ضغط فقود (lossy compression)، والذي سيخفّض حجم الصورة بشكل كبيرة على حساب الجودة، فاستعمل الإضافة imagemin-pngquant.

npm install imagemin-pngquant –save-dev

خيار الضغط الذي توفره هذه الإضافة يتمتع بالذكاء والذي يدعى PNG quantization (توضيح صور PNG)، إذ يعمل على اللعب بالألوان التي يراها دماغنا على أنها تقريبًا متماثلة محولًا الصورة إلى حجم 256 أو 8 بت للألوان. أفضل شيء في هذه الإضافة هو أنها لن تعدل أي شيء على الصور إن لم تتحقق حدود معينة متعلقة بالجودة. سنعدل على المثال السابق لاستعمال pngquant()‎ مع imagemin بالشكل التالي:

var imagemin = require('gulp-imagemin');

gulp.task('default', function() {
    return gulp.src('app/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

على أي حال، عملية تحسين الصور هي عمليةٌ بطيئةٌ للغاية، ولا ترغب في تكرارها إلا إذا كان ذلك ضروريًا، ويمكننا تخزينها مؤقتًا باستخدام إضافة gulp-cache.

npm install gulp-cache –save-dev

الشيفرة التي سنضيفها إلى ملف gulpfile.js:

var cache = require('gulp-cache');

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
  // تخزين الصور المُحسّنة مؤقتًا
  .pipe(cache(imagemin({
      interlaced: true
    })))
  .pipe(gulp.dest('dist/images'))
});

انتهينا تقريبًا من عمليات التحسين، وبقي مجلدٌ أخير يجب علينا نقله من مجلد app إلى dist وهو مجلد الخطوط.

لمزيد من التفاصيل حول تحسين الصور في موقعك، ننصحك بالإطلاع على مقال «دليلك الشامل لتحسين أداء الصور على موقعك».

نسخ الخطوط إلى مجلد dist

لن تحتاج الخطوط إلى أيّة عمليات تحسين، وكل ما علينا فعله هو نسخها إلى مجلد dist. يمكننا نسخ الملفات باستخدام Gulp ببساطة باستخدام الدالتين gulp.src و gulp.dest دون أيّة إضافات:

gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
  .pipe(gulp.dest('dist/fonts'))
})

سينسخ Gulp مجلد fonts من app إلى dist في كل مرة تشغِّل فيها الأمر gulp fonts. أصبحت لدينا ست مهام مختلفة في ملف gulpfile.js، ويجب علينا استدعاؤها يدويًا باستخدام سطر الأوامر. ربما نفكّر بربط المهام جميعًا إلى أمرٍ وحيد، لكن قبل ذلك لننظر إلى كيفية حذف الملفات المولّدة تلقائيًا.

حذف الملفات المولدة تلقائيًا

لمّا كنّا نولِّد الملفات تلقائيًا، فعلينا أن نتأكد أنَّ الملفات التي لم تعد مستخدمةً لن تبقَ موجودةً دون علمنا. سنحتاج إلى استخدام del لمساعدتنا في ذلك.

npm install del –save-dev

الدالة del تأخذ مصفوفةً من محارف التحديد (globs) التي تخبرها ما هي المجلدات التي يجب حذفها. يمكننا استخدامها كمهمّة في Gulp كما فعلنا من قبل:

var del = require('del');

gulp.task('clean:dist', function() {
  return del.sync('dist');
})

سيَحذف Gulp المجلد dist في كل مرة تُشغِّل فيها الأمر gulp clean:dist.

ملاحظة: لا حاجة أن نقلق من حذف مجلد dist/images لأنَّ إضافة gulp-cache خزَّنت نسخةً مؤقتةً من الصور في نظامك. ستحتاج إلى إنشاء مهمّة منفصلة لحذف النسخة المؤقتة وليكن اسمها cache:clear:

gulp.task('cache:clear', function (callback) {
return cache.clearAll(callback)
})

جمع مهام Gulp مع بعضها

ما فعلناه إلى الآن هو إنشاء مجموعتين منفصلتين من مهمات Gulp.

الغرض من المجموعة الأولى هو المساعدة في التطوير، حيث حوّلنا ملفات Sass إلى CSS، وراقبنا تغيرات الملفات، وأعدنا تحميل الصفحة في متصفح الويب وقت الحاجة. أما المجموعة الثانية فكانت لتحسين الملفات الملحقة بالصفحة، حيث جهّزنا جميع الملفات للموقع الإنتاجي، وذلك بدمج ملفات CSS و JavaScript وتصغيرها، وتحسين الصور ونسخ الخطوط من app إلى dist.

لقد وضعنا أول مجموعة من المهمات في بُنية يمكن تشغيلها باستخدام الأمر gulp watch:

gulp.task('watch', ['browserSync', 'sass'], function (){
  // ... 
})

أما المجموعة الثانية فتستخدم لإنشاء الموقع الإنتاجي، وهي تتضمن المهمات clean:dist و sass و useref و images و fonts.

يمكننا إنشاء مهمة باسم build التي ستجمع كل ما سبق في مهمة واحدة.

gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
  console.log('Building files');
})

للأسف لا يمكننا كتابة المهمّة build بهذه الطريقة لأن Gulp سيشغِّل المهمات المُمرَّرة كوسيطٍ ثانٍ إلى الدالة task معًا وليس بالترتيب.

فهنالك احتمالٌ أن ينتهي تنفيذ المهمات useref أو images أو حتى fonts قبل إكمال المهمّة clean التي تُسبِّب حذف كامل مجلد dist! لذا لضمان أنَّ المهمات ستُنفَّذ بترتيبٍ صحيح، فسنحتاج إلى استخدام إضافة خارجية باسم Run Sequence:

npm install run-sequence –save-dev

وهذه هي البنية العامة لطريقة تشغيل سلسلة من المهمّات:

var runSequence = require('run-sequence');

gulp.task('task-name', function(callback) {
  runSequence('task-one', 'task-two', 'task-three', callback);
});

عندما تستدعى المهمّة task-name فسيُشغِّل Gulp المهمّة task-one أولًا، وبعد انتهاء تنفيذها سيُشغِّل المهمة task-two، ثم task-three وهكذا.

تسمح لك إضافة Run Sequence بتشغيل المهمات معًا إذا وضعتَها في مصفوفة:

gulp.task('task-name', function(callback) {
  runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});

في هذه الحالة، سيُشغِّل Gulp المهمّة task-one، وبعد انتهاء تنفيذها فسيُشغِّل جميع المهمات الموجودة في المصفوفة معًا، وجميع المهمات الموجودة في المصفوفة يجب أن ينتهي تنفيذها قبل تنفيذ task-three.

لذا يمكننا الآن إنشاء مهمة التي تُشغِّل المهمّة clean:dist أولًا، ثم تتبعها بقية المهمات:

gulp.task('build', function (callback) {
  runSequence('clean:dist', 
    ['sass', 'useref', 'images', 'fonts'],
    callback
  )
})

ولجعل الملف متناسقًا، فسنستخدم نفس الطريقة مع أوّل مجموعة من المهمات، وسنستخدم الاسم default كاسمٍ للمهمّة:

gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
})

لماذا اخترنا الاسم default؟ لأنّ المهمّة ذات الاسم default ستُشغَّل إن كَتبتَ الأمر gulp دون تمرير اسم المهمة له، مما يوفِّر عليك بعض الوقت :-) .

الخلاصة

بدأنا درسنا ونحن لا نعرف شيئًا عن Gulp، ثم كتبنا مهمةً بسيطةً لتحويل ملفات Sass إلى CSS ومراقبة ملفات HTML و JS، وتعلمنا كيف نشغِّل تلك المهمّة في سطر الأوامر باستخدام الأمر gulp.

ثم بنينا بعد ذلك مهمّةً ثانيةً، ألا وهي build، والتي تُنشِئ المجلد dist لكي يحتوي على ملفات الموقع الإنتاجي، وحوّلنا ملفات Sass إلى CSS وأجرينا عمليات تحسين على ملحقات الصفحة، ونسخنا المجلدات الضرورية إلى مجلد dist؛ وتمكنّا من تنفيذ كل ما سبق بأمرٍ وحيد وهو gulp build.

في النهاية، أنشأنا المهمّة clean التي تحذف المجلد dist وبالتالي سنحذف أيّة ملفات غير مستخدمة في الموقع. لا تقف عند هذا الحد! Gulp واسع جدًا وإمكانياته لا تنتهي، وأرى أنَّ عليك تصفّح الإضافات الخاصة به والموجودة في الموقع الرسمي، وعليك الاستعانة بتوثيق API إن أردت رؤية توثيق دوال Gulp.

المصادر

• تعتمد هذه المقالة اعتمادًا أساسيًا على مقالة Gulp for Beginners لصاحبها Zell Liew
• قائمة بالمقالات التي تتحدث عن Gulp
• المجاري (streams) في Node
• مقالة Automate Your Tasks Easily with Gulp.js لصاحبها Justin Rexroad

إن كنت مطور ويب فأنت تعاني حتماً من مشكلة اكتشاف الأخطاء ومعالجتها أو ما يعرف بـ debugging، فمثلاً إذا كان لديك خطأ في شيفرة JavaScript فهناك احتمال ضئيل أن يظهر لك المستعرض رقم السطر الذي يحوي الخطأ، وحتى إن أظهره لك فليس من الضروري أن يكون هذا السطر هو المسبب للخطأ. وإذا ما اتجهنا نحو أخطاء ومشاكل مظهر الصفحة CSS فالأمر أشبه بالتنجيم. فمثلاً إذا واجهت مشكلة في تنسيق الصفحة فالحل الوحيد هو العودة إلى ملف CSS والقيام ببعض التعديلات ومن ثم الرجوع إلى المستعرض لرؤية ما إذا كانت هذه التعديلات قد حلت المشكلة، وهكذا في رحلة مكوكية بين المحرر والمستعرض حتى تجد المشكلة. لكن باستخدام أدوات المطور DevTools تستطيع تتبع مشاكل المظهر بفعالية، واكتشاف أخطاء جافاسكربت بسهولة، بالإضافة إلى أنها تقدم لك إضاءات ومعلومات حول الأداء والتي يمكن استخدامها لتحسينه.

الشيفرة المصدرية الخاصة بمثال الرزنامة

مخطط الفئات (classes) هو جزءٌ مهمٌ جدًا من لغة النمذجة الموحدة UML، وهو مخطط هيكلي مهمته عرض الفئات بنظامٍ معيّن مع جميع العلاقات التي تربط بينها، وهو -برأيي- أشهر نوع من المخططات في هندسة البرمجيات.

يساعدك رسم مخطط الفئات على رؤية المشكلة بأفقٍ أوسع؛ وعندما تكتبها، فستفرِّغ مساحةً في رأسك للأفكار الجديدة. وتُسهِّل أيضًا فهم هيكلية الفئات من الآخرين عندما تناقش المشكلة معهم. الفكرة هي أنني أنسى عادةً بنية المخططات عندما أحاول قراءة أحد المخططات التي رسمها غيري، فلهذا قررت كتابة هذه المقالة لعلها تذكرني بها في المستقبل.

دورة علوم الحاسوب

دورة تدريبية متكاملة تضعك على بوابة الاحتراف في تعلم أساسيات البرمجة وعلوم الحاسوب

اشترك الآن

الفئة – Class

المكون الأساسي لهذه المخططات هو مخطط الفئة، التي تَظهَر على شكل عقدة (node) وعادةً كصناديق (boxes)، يمكن أن يُعرَّف لكل صنف دوال (methods) وخاصيات (attributes)، كما هو موضَّح بالشكل أدناه:

الوراثة – Inheritance

وراثة الفئات -في ما يتعلق بمخططات UML- هي علاقة تعميم (generalization) التي تمثل علاقة "هو" (is a) على مستوى الفئة، المخطط الآتي يُظهِر كيفية رسم التعميم.

التطبيق – Realization

هنالك علاقة مختلفة في UML للواجهات (interfaces)، فالوراثة من واجهة تسمى "implementation" التي هي علاقة "تطبيق" (realization) في مخططات UML. تمثيلها الشكلي مشابه للوراثة، إلا أنَّ الخط مقطّع (dashed)، ويجب تحديد أنَّ الواجهة هي «مجرَّدة» (abstract) – أي أنَّ اسمها مكتوبٌ بخطٍ مائل؛ كما هو مبيّن في هذا الرسم.

الارتباط – Association

شكل آخر من أشكال العلاقات في مخططات الفئات هو الارتباط (association)، وهو علاقة على مستوى الكائنات (object-level) أي أنه يحدث بين كائناتٍ لأصنافٍ مرتبطةٍ؛ لذا تُمثَّل كل العلاقة كعائلة من الوصلات (links). هنالك عدة أنواع من الارتباط مُحدَّدة أكثر (التجميع aggregation و التألف composition).

التجميع – Aggregation

التجميع هو شكل أكثر تحديدًا وتخصيصًا من الارتباط. وهو علاقة "لديه" (has a)؛ التمثيل الرسومي لهذه العلاقة هو الآتي:

التألف – Composition

شكل أكثر تخصيصًا من التجميع هو التألف (composition) فبدلًا من علاقة "لديه" (has a) تكون العلاقة هي "يملك" (owns a). وهذا ملائمٌ للعلاقات التي لا يمكن أن يتواجد فيها كائن إلا كجزءٍ من كائنٍ آخر. على سبيل المثال، إن كنت هنالك طائرة تملك جناحًا فهذا تألف، فماذا ستفعل بالجناح لوحده؟ لكن إن كانت هنالك بركة فيها بعض البط فهذا تجميع، لأنه يملك للبط أن يعيش دون بركة (وإن لم يكن سعيدًا بذلك)، والبركة ستبقى بركة حتى لو لم يكن فيها بط؛ التمثيل الرسومي لعملية التألف هو مثل التجميع، لكن المُعيَّن مملوء وليس مُفرَّغ.

الاعتمادية – Dependency

آخر نوع من العلاقات هو "الاعتمادية" (dependency) وهو أضعف من الارتباط (association) ويقول: إن كانت الفئة تستعمل فئةً أخرى، فهي تعمد عليها.

يكون من المناسب استعمالها في حالات تكون نسخةٌ من الفئةِ مخزنةً في متغيرٍ محلي في دالة فئة أخرى، أو إذا استعمِلَت دالةٌ ثابتةٌ (static method)؛ لذا لن تكون الفئات مرتبطةً، لكن واحدة تعتمد على الأخرى.

خلاصة

صممت كل الأمثلة السابقة باستخدام محرر مفتوح المصدر باسم Dia، وأنا أنصح باستخدامه. ولأنه محرر رائع، فهذه صورة شاملة لجميع أنواع العلاقات إن أحببت طباعتها.

ترجمة -وبتصرّف- للمقال UML Class Diagram لصاحبه Radek Pazdera.

محرّرُ Vim يتمتّع بشهرة واسعة، بفضل هذه الشهرة أصبح يُعدّ من أوائل المحرّرات التي يُمكن للمستخدم أن يُخصّصها ويُضيف عليها كل ما من شأنه أن يجعل التّحرير مُريحاً وسهلاً سواء شكلاً أو أداءً. لقد تحدّثنا سابقاً عن الشّكل والمظهر، وقد حان الوقتُ للغوص في أعماق الإضافات التي تجعل التحرير لعبة في كثير من الأحيان بل هناك بعض الإضافات التي ستندم على أنّك لم تعرفها في كلّ هذه السنين منذ بداية استخدامك للحاسب، مُعظم الإضافات تتّبع فلسفة 'اجعلها أسرع وأبسط' وهذا يعني أنّك ستجدُ ضالّتك في هذا الدّرس إذا كنت تبحث عن تحسين أدائك وزيادة إنتاجيّتك إذ ستتعلّم كيف تديرُ الإضافات من تثبيت وتحديث إلى طرق حذفها.

صحيح أن المُحرّر ممتازٌ جدّا في ما يتعلق بزيادة الإنتاجية حتى بدون أي إضافات (كما رأينا في الدّرسين السّابقين)، لكنّك بالإضافات قادرٌ على أخذ المُحرّر إلى المستوى المُتقدّم بشكل جدّ ملاحظ.

ماهي إضافات vim بالضبط؟

لا أظنّ أنّك قد تسألُ هذا السؤال، فنحن محاطون بالإضافات في كلّ مكان من إضافات المتصفّح إلى تطبيقات الهواتف الذكيّة، لكن في حال سألت هذا السّؤال جديّا، ففكّر في الإضافة على أنها أداة مساعدة تؤدّي عملا معيّنا أو تساعدُ في القيام بأمر ما، الشيء الذي يُسهّل ويُسرع عملية الإنتاج، وقد أعطيتك إضافات المتصفّح كمثال، و هذا بالضبط ما تفعله إضافات vim، أي تسريع عملية الإنتاج (الكتابة).

الإضافات الخاصّة بالمحرّر يُمكن أن تكون عامّة أو مُخصّصة للغة برمجة ما، لبيئة ما أو إطار عمل معيّن.

معظم الإضافات مُطوّرة من مُبرمجين مُستقلّين عن مُطوري المُحرّر، وكذلك تستطيع أنت أن تُبرمج إضافة خاصّة بك سواء بلغة Vimscript أو بلغتك إذا كنت تجيد لغات مثل روبي، بايثون، Lua. مع ملاحظة أن الإضافات التي لم تُبرمج بلغة Vimscript عادة ما تكون بلغة بايثون.

تثبيت الإضافات

أولا عليك أن تعرف بأن الإضافات ليست إلا ملفّات برمجيّة وتنصيبها لمُحرّر Vim أمر في غاية السهولة، ويُمكن ذلك بعدّة طُرق سواء بأداة pathogen الّتي تسهّل إدارة ملفّات الإضافات البرمجيّة حيثُ تقوم بتنظيم الملفّات والإضافات لأجل تَيْسِيرِ تحديثها وحذفها.

كذلك يُمكن فعل نفس الأمر باستخدام أداة Vundle التي استُلهمت من مشروع Bundler الخاص بإدارة جواهر روبي Rubygems. مع Vundle يمكنك ضبط إعدادات الإضافات في ملف vimrc، يُمكنك تثبيت، تحديث، البحث، وحذفُ الإضافات.

هناك العديد من الأدوات الأخرى التي تؤدّي نفس الغرض، لكن pathogen و Vundle هما الأكثر استخداماً، وسأريك كيف تستخدمهما معاً ويمكنك اختيار أي واحدة منهما، لكنّي سأعتمد فقط على Vundle في الدروس القادمة التي سأتناول فيها استعمال الإضافات المُختلفة.

1. تثبيت الإضافات باستعمال أداة pathogen

أداة pathogen تعتمد مبدأ البساطة المطلقة، إذ لا تتوفر على الكثير من المهام والتعقيدات وتُمكّنك من تثبيت الإضافات بنقلها إلى مجلد:

.vim/bundle/plugin

حيثُ plugin هو ملف الإضافة التي تُريد تثبيتها.

لتثبيت الأداة حمّل ملفّ pathogen.vim ثمّ أنقله إلى مجلّد :

~/.vim/autoload

لديك أيضا خيار التثبيت عبر سطر الأوامر (تحتاج إلى أداة curl):

تثبيت أداة curl على Gnu/Linux

على Debian وما بُني عليها:

$ sudo apt-get install curl

على Fedora:

$ sudo yum install curl

تثبيت أداة curl على Windows:

حمّل curl، بعد فكّ الضغط عن الملفّ انقل الملف المسمّى curl.exe إلى مجلّد %windir%

للوصول إلى المجلّد افتح قائمة ابدأ ثمّ تشغيل (Run) ثمّ ألصق %windir% واضغط Enter.

بعد الحصول على curl لأنظمة جنو/لينكس الخطوة التالية هي تطبيق الأمر التالي من الطّرفيّة (Terminal):

$ mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

أما إذا كنت من مستعملي Windows فطبّق الأمر التالي في برنامج Cmd:

> mkdir -p ~\vimfiles\autoload ~\vimfiles\bundle && \
curl -LSso ~\vimfiles\autoload\pathogen.vim https://tpo.pe/pathogen.vim

بعد نقل الملفّات وانتهاء العمليّة تحتاج إلى إضافة الأسطر التالية إلى ملفّ vimrc:

execute pathogen#infect()
syntax on
filetype plugin indent on

الآن أنت قادرٌ على تثبيت أي إضافة تريد (المثال التالي يقوم بتثبيت إضافة NERDTree على توزيعات Gnu/Linux و Mac)

$ cd ~/.vim/bundle && git clone https://github.com/scrooloose/nerdtree.git

أمّا إذا كنت تستعمل cmd في Windows، فهاك الأمر:

> cd ~\vimfiles\bundle && git clone https://github.com/scrooloose/nerdtree.git

أداة Git

معظم الإضافات مستضافة على GitHub لذلك فأداة git ضرورية للتحميل وهي متوفرة لمستخدمي جنو/لينكس على المستودعات الرّسمية ويمكنك تثبيتها تماماً كما تبّثنا أداة curl:

لـ Debian وما بُني عليها:

$ sudo apt-get install git

لـ Fedora:

$ sudo yum install git

لمستخدمي وندوز حمل git

هذا إذا أردت تثبيت الإضافات من الطرفيّة، أمّا إذا أردت أن تقوم بالأمر بشكل يدوي فهناك دائما طريقة أخرى:

أولاً عليك تحميل الملفّات مضغوطة:

https://github.com/scrooloose/nerdtree/archive/master.zip

حيثُ scrooloose وnerdtree تتغيّر حسب اسم الإضافة واسم المستخدم الخاص بمُطوّرها على Github.

فك ضغط الملفّ ثمّ انقل ما بداخله إلى مجلّد bundle.

2. تثبيت الإضافات باستعمال أداة Vundle

أداة vundle شبيهة بأداة pathogen وتؤدّي نفس الغرض تقريباً، لكن أداة Vundle تستطيع فعل كثير من الأشياء التي لا تستطيع pathogen فعلها، مثلا في Vundle يُمكنك البحث عن الإضافات ، حيث تعرض لك الأداة جميع الإضافات الموافقة لما أدخلته وتعطيك إمكانية التنقّل بين نتائج البحث واختيار الإضافة المراد تثبيتها وبضغطة زر تُثبّتُ الإضافة، يُمكنك اعتبار الأداة بمثابة مدير حزم مثل apt-get في توزيعة أبنتو وyum في توزيعة فيدورا.

أداة Vundle تمكنّك من :

• ضبط إعدادات الإضافات من ملفّ vimrc مباشرة.
• تثبيت الإضافات.
• تحديث الإضافات المثبتة.
• البحث عن الإضافات المتوفّرة.
• حذف الإضافات.
• القيام بكلّ ما سبق باستعمال سطر أوامر بسيط وسهل.

تثبيت أداة Vundle

لتثبيت الأداة عليك أن تتوفر على أداة git (أنظر فصل أداة Git أعلاه)، وعليك أيضاً أن تتوفر على أداة Curl، حيثُ تُستخدم للبحث من طرف Vundle.

على Gnu/Linux أو ماك، طبّق الأمر التالي على الطّرفية:

$ git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

بعد تطبيق الأمر أعلاه، أضف هذه الأسطُر إلى ملفّ vimrc:

set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'gmarik/Vundle.vim'
Plugin 'user/plugin.vim'
Plugin 'L9'
filetype plugin indent on
call vundle#end()

التثبيت على نظام Windows، طبّق الأمر التالي في سطر الأوامر Cmd:

cd %USERPROFILE% && git clone https://github.com/gmarik/Vundle.vim.git vimfiles/bundle/Vundle.vim && gvim _vimrc

ثمّ أضف الأسطر التالية إلى ملفّ vimrc:

set nocompatible
filetype off
set rtp+=~/vimfiles/bundle/Vundle.vim/
let path='~/vimfiles/bundle'
call vundle#begin(path)
Plugin 'gmarik/Vundle.vim'
Plugin 'user/plugin.vim'
Plugin 'L9'
filetype plugin indent on
call vundle#end()

مع مراعاة أن الأسطر باللون المُختلف غير ضروريّة وهي تعني:

• Plugin 'user/plugin.vim': تثبيت إضافة من github مُباشرة حيث user هو اسم مستخدم المُطوّر و plugin.vim اسم الإضافة.
• Plugin 'L9': تثبيت إضافة في حال توفّرها على Vimscripts.

ملاحظة: بعد إضافة أي سطر لتثبيت إضافة ما عليك حفظ الملفّ والخروج من vim ثمّ تطبيق الأمر:

:PluginInstall

وسيبدأ Vundle بتثبيت الإضافات واحدة تلو الأخرى.

الآن لتثبيت أي إضافة باستخدام Vundle يمكنك الاختيار بين الطّرق التالية:

تثبيتُ إضافة

التثبيت من ملفّ vimrc.

لقد رأينا هذه الطّريقة من قبل، فقط إضافة أحد الأسطر السّابقة أعلاه لملفّ vimrc ثمّ الخروج من Vim وفتحه مجدّدا ثمّ تنفيذ الأمر PluginInstall كفيل بالأمر.

التثبيت من المُحرّر مباشرة:

Vundle يُوفّر لنا عدة أوامر جاهزة لاستخدامها داخل المُحرّر ومن بين هذه الأوامر أمر PluginInstall، ويُمكنك استعماله في المُحرّر على النّحو التالي:

:PluginInstall plugin

حيثُ plugin هو اسم الإضافة، ويمكن أن يكون على شكل user/plugin في حال كانت الإضافة مستضافة على GitHub.

الأمر سيفتح تقسيما جديدا للشاشة وسيبدأ بعملية التثبيت مباشرة الوقت المُستغرق يعتمد على حجم الإضافات التي تُحاولُ تثبيتها وعلى سرعة الأنترنت لديك. عند الانتهاء يُمكنك إغلاق التقسم باستخدام:

:q

أو

:bdelete

البحث عن إضافة

عرض جميع الإضافات التي يُمكن لـ vundle تثبيتها

إذا كنت فضولياً فمن الجيّد أن تطّلع على كميّة الإضافات الموجودة لمحرّر vim وأسمائها، لفعل ذلك نفّذ الأمر التالي على المُحرّر:

:PluginSearch!

إلى حين كتابة هذا الدّرس هناك أكثر من 4000 إضافة يستطيع Vundle تثبيتها، الإضافات يُمكن أن تكون عامة ومفيدة لجميع المُبرمجين، للغة معيّنة، لبيئة ما أو حتى لإطار عمل معيّن.

تحديثُ إضافة

بعد تثبيت إضافة ما أنت جاهز للعمل بها واستغلالها لتحسين أداء المُحرّر، لكن بعد مدة معيّنة سيضيف المطوّر بعض التحسينات لإضافته، وكلّنا ذاك الذي يرغبُ في الجديد المحسّن، لذلك أداة Vundle تُوفّرُ لنا أمر PluginUpdate لتحديث الإضافات.

لتحديث جميع الإضافات:

:PluginUpdate

لتحديث إضافة معيّنة:

:PluginUpdate plugin

لتحديث أكثر من إضافة يُمكنك فصلُ أسمائها بمسافة:

:PluginUpdate plugin1 plugin2

يمكنكَ استخدام أمر PluginInstall مع إضافة علامة تعجّب(!) لتحديث جميع الإضافات (ليس ضروريا، مُجرّد أضف لمعلوماتك):

:PluginInstall!

وهو أمرٌ يخبرُ Vundle بالقيام بعمليّة إعادة تثبيت، ما يجلبُ أحدث الإصدارات.

حذف إضافة

قد تشعرُ أنّ الإضافة التي قُمت بتثبيتها مؤخّراً ليست مفيدة بالمرّة أو أنها تُسبب مشاكل للمحرّر، لا مشكلة يمكنك التخلّص منها باستخدام Vundle.

لحذف إضافة عليك أولاً أن تعرض الإضافات المُثبّتة، لقيام بذلك طبّق الأمر:

:PluginList

بعد تطبيق الأمر سيظهر قسم في الشاشة يحوي جميع الإضافات المُثبّتة تصفح باستخدام أسهم لوحة المفاتيح واختر الإضافة التي تُريد حذفها ثمّ اضغط على زرّ D.

ستظهر علامة – بجانب اسم الإضافة، هذا يعني أنّ الإضافة حُذفت ويمكنكَ الخروج، إذا أردت التراجع يمكنك ذلك باستخدام أمر التثبيت ما دام اسم الإضافة في ملف vimrc أو يُمكنك حذف اسمها في الملفّ إذا أردت تأكيد عدم رغبتك في رؤية وجه تلك الإضافة مُجدّدا.

حذفُ مجموعة من الإضافات دُفعة واحدة

يُمكنك حذف مجموعة من الإضافات بإزالتها من ملفّ vimrc ثم تنفيذ الأمر التالي:

:PluginClean

سيقوم Vundle بإظهار رسالة تأكيد أكتب y ثمّ Enter للتأكيد، الأمر سيقوم بحذف جميع الإضافات التي لا توجد في ملفّ vimrc.

حذفُ جميع الإضافات دُفعة واحدة (احذر!)

إذا كنت تُريد أن تعود إلى زمن vim الخالص بدون أي إضافة، يُمكنك حذف جميع الإضافات بإزالتها من ملفّ vimrc ثم تنفيذ الأمر التالي:

:PluginClean

سيقوم Vundle بإظهار رسالة تأكيد أكتب y ثمّ Enter للتأكيد، الأمر سيقوم بحذف جميع الإضافات التي لا توجد في ملفّvimrc أي جميعها في حالتنا.

خاتمة

تعرّفنا في هذا الدّرس على كيفيّة إدارة الإضافات ولم يبق لنا إلا شرح أهم الإضافات التي من شأنها أن تزيد من إنتاجيتك، وتُحسّن بها أداءك. الدرس القادم سيكون عن الإضافات التي يحتاج إليها كل مبرمج بغضّ النظر عن اللغة التي يتعامل بها مع برامجه وتطبيقاته.

لقد تعرّفنا معا في الدرس السابق على أساسيّات التّعامل مع النّصوص والملفّات في محرر vim حيثُ شرحتُ أوامر متعلّقة بالتّعديل والحذف كالقصّ واللّصق والحذف، وتعرّفنا على مبادئ الانتقال بين الكلمات، الأسطر، التّبويبات وتقسيمات الشّاشة؛ والآن حان وقت المزيد من الأوامر -المتقدمة نسبيّا- التي ستساعدك على التعرف على المحرر بشكل أعمق.

معلومات الملف

إذا قمت بفتح ملف ما وتريد معلومات عنه فكل ما عليك فعله هو الضغط على Ctrl+g أو تنفيذ الأمر:

:f

بعد تنفيذ الأمر ستلاحظ في أسفل الملف ستلاحظ المعلومات التالية:

• اسم الملف
• عدد أسطر الملف
• إحداثيات ومكان المؤشّر في الملف

التّعامل مع الفقرات

1. الأزرار a, o, s | A, O, S للانتقال إلى نمط الكتابة

الزر a سيقوم بالانتقال إلى وضع الكتابة بعد موضع المؤشّر مباشرة. للانتقال إلى وضع الكتابة بعد جملة كاملة أو فقرة معيّنة (بـأكملها):

A

الزر o (كما ذكرنا سابقا) ينتقل بك إلى نمط الكتابة في سطر جديد (تحت المؤشّر)، أما إذا كنت ترغب بالدّخول إلى نمط الكتابة في سطر جديد فوق المؤشّر فاستعمل:

O

الزّرّ s سيقوم بحذف الحرف الذي يوجد فيه المؤشر وينتقل بك مباشر ة إلى وضع الكتابة، أي أن الزر s له دور التعديل.

إذا أردت تعديل جملة كاملة أو فقرة معيّنة (بـأكملها):

S

2. الزرّان r و R للانتقال إلى وضع الاستبدال

يوجد وضع (نمط) آخر في vim ألا وهو وضع الاستبدال (Replace) يمكنك أن تحزر فائدته من اسمه فقط، ويمكنك أيضا ملاحظة أن الزرّان المسؤولان عن الولوج إليه هما أول حرف من كلمة Replace.

النّمط بكل بساطة يُخوّلكَ لاستبدال ما تشاء سواء حرفا واحدا في كل مرّة أو مجموعة في آن واحد.

بحيث :

• الزر r لاستبدال حرف واحد فقط.
• الزر R لاستبدال عدة حروف في آن واحد.

3. المزيد عن الانتقال بين الجمل والفقرات

لقد ذكرنا سابقا (الدرس السابق) أساسيّات التّنقل في ملفّ معيّن، سنغطّي المزيد في هذه الفقرة.

الانتقال إلى الفقرة التالية، استعمل { .

تريد عكس الأمر؟ Ctrl+o سيفي بالأمر.

تحريك المؤشر بين الجمل:

للانتقال بين الجمل ببساطة استعمل كلا من ( و )

حيث ) للانتقال إلى الجملة التالية و ( للرجوع إلى الجملة السابقة.

استعمل الأرقام إذا كنت ترغب بالقفز وتجاوز الجمل، مثلا 3) للانتقال إلى الجملة الثالثة بعد المؤشر (يمكنك تغيير الرقم 3 بما تشاء).

للانتقال إلى حرف معيّن:

fx

حيث x هو المكان الذي نرغب بوضع مؤشر الفأرة عليه.

يمكنك استعمال الأرقام أيضا، مثلاً:

3fx

في هذا المثال نُخبِرُ vim بأن ينتقل إلى حرف x الثّالث (يعني تجاوز أوّل حرفين x وانتقل إلى الثّالث).

4. تعليم منطقة معيّنة في ملفك

تخيل أنك كتبت كمّا كبيرا من الشيفرة في ملفّك، وأثناء كتابتك في لحظة معينة تذكّرت أنك تحتاج إلى إضافة شيء ما بالأعلى، لنقل بداية الملف، ستقول الأمر سهل كل ما عليّ فعله هو الضغط على gg للانتقال إلى الأعلى ثم أضيف ما أشاء، نعم الأمر يبدو جيّداً، لكن ماذا لو أردت العودة إلى المكان الأول الذي كنت فيه قبل الانتقال إلى الأعلى؟ هنا يأتي دور التعليم أي وضع علامة في مكان ما لتمييزه بزر معين.

لاستخدام التعليم قم بالضغط على m (اختصارًا لـِ mark) ثم الزر الذي تريد التعليم به.

بالمثال يتضح المقال:

إذا كان مؤشر الفأرة مثلا في منطقة ما في وسط الملف (على حرف معيّن بالضبط) وتريد تعليمه بزر a :

ma

الآن انتقل إلى أي مكان ترغبه في الملف وكلما أردت العودة إلى السطر المعلّم بزر a ستضغط على a'، أما إذا كنت ترغب في العودة إلى موضع المؤشّر بالتّحديد فاضغط على a`.

يمكنك استعمال أي حرف من ( a-z A-Z ) بشرط أن يكون حرفاً واحداً فقط أي أنّك تملكُ ما مجموعه 52 زرا لتعليم مختلف مناطق الملف.

5. استعمال الأرقام لتكرار العمليّات

إلى الآن، تعرّفنا على استعمالات عديدة للأرقام لكن أهم ما يجب عليك معرفته بخصوص الأرقام هو أنك تستطيع أن تستعملها لتكرّر عملية ما بعدد لا نهائي من المرّات.

مثلا لنقل أنّ لدينا جملة في ملفنا، ننسخ الجملة باستعمال yy (اُنظر الدرس الأول) ولكنّنا لا نريد لصقها مرة واحدة فقط بل العديد من المرات (أي تكرارها في الملف n مرّة). للقيام بذلك طبّق الأمر التالي:

np

بحيث n هو عدد المرات التي ترغب بلصق الجملة في الملف (بعد مؤشر الفأرة مباشرة).

أقرب مثال أستحضره حاليا هو القوائم في لغة HTML، لنقل أنّك تحتاج إلى إضافة 10 قوائم في الملف. هل تعتقد أن كتابتها بشكل يدوي سيفي بالغرض؟ (إن كان جوابك نعم فاستعدّ للتضحية بحصة لا بأس بها من وقتك الثمين). بالطبع الجواب هو لا. لذلك كل ما عليك فعله هو كتابة السطر الأول:

<li> Item in The List </li>

ثم انسخ السطر باستعمال yy ثم ألصقه 10 مرّات باستعمال:

10p

طبّقت الأمر 1000000p وحصلت على مليون سطر (نواة لينكس؟) وملف بحجم 28Mb ولا زال vim يستجيب في أجزاء من الثانية، لا تغيير في السرعة حتى عند الحفظ (لا أظن أن أي بيئة تطوير قادرة على فعل نفس الشّّيء خلال جزء من الثانية، وهذا سبب قويّ لاستخدام المحرر، أليس كذلك؟).

ملاحظة: هذا مجرد مثال والتطبيقات تكاد تكون لا نهائية لذلك الدّور عليك لتستكشف تطبيقات الطريقة وهذا الأمر متروك لخيالك ومدى رغبتك في التّعلّم .

6. التّراجع وإلغاء التراجع

لقد تحدّثتُ أيضاً عن أساسيّات هذه الخاصية في الدرس السابق (u للتراجع عن تعديل ما و Ctrl+r لإلغائِه)، وقد حان الوقت الآن لبعض العمليّات المتقدّمة.

تراجع عن جميع التعديلات التي قمت بها قبل x دقائق من الآن:

:earlier 2m

هذا الأمر يقوم بالتراجع عن جميع التعديلات التي قُمت بها منذ دقيقتين، وبالطبع يمكنك استخدام الثواني كوحدة زمنية.

:earlier 25s

ولعكس العمليّة استعمل later:

:later 3m

هذه الأوامر مفيدة إذا كنت تقوم بتعديلات عديدة في وقت قصير ولكنّك عادة لا تتذكّر الأوقات بالتّحديد، الرجوع بحسب عدد التّعديلات طريقة أفضل(نعم خاصيّة أخرى).

للتّراجع بحسب عدد التّعديلات:

:undo 5

الأمر أعلاه يقوم بإلغاء آخر خمس تعديلات.

عرض قائمة التراجعات:

:undolist

محرك البحث في vim

vim يمتلكُ محركَ بحث مدهش وقوي يمكنك إعداده وتخصيصه كيفما تشاء، حيث يمكنك إخبار المحرّر بأنك تُريد أن يتجاهل حالة الأحرف (مثلا a وA كلاهما سيوافقان نتائج البحث)، ويمكنك أيضا إعداده لعرض النتائج بشكل فوري (يعني أن يقوم بالبحث بمجرد المباشرة بالكتابة).

إخبار المُحرّر بأننا نريد بحثا فوريا:

:set incsearch

تجاهل حالة الأحرف:

:set ignorecase

مثلا إذا قمت بالبحث عن “hello” :

/hello

ستكون النتائج متوافقة مع كل من : Hello , hello , HELLO

هذه الإعدادات لن تُسجّل إذا أغلقت المحرّر، وقد ذكرت في الدّرس السّابق أنك تستطيع إضافة أسطر إلى ملف vimrc. لكي تُسجّلَ الإعدادات بشكل افتراضي، حيث يكون كل شيء معدّا مسبقاً فور فتح المحرّر، يمكنك فعل ذلك الآن إذا كنت ترغب في ذلك. فقط افتح الملف (ملف vimrc) وألصق الأسطر التالية في الأسفل:

set incsearch
set ignorecase

ملاحظة: للتنقّل بين عمليات البحث استعمل كلا من n و N.

النّصوص داخل الأقواس، علامات التّنصيص والمعقوفات

vim يُوفّر مساعدةً قيّمةً للمبرمجين، حيث يحتوي على كمّ كبيرٍ من الأوامِر التي تُساعدهم على التعامل مع كتلِ التّعليمات البرمجية (code blocks)، إذ يمكّنكَ المحرّر من تعديل، حذف و نسخ كل ما يوجد بداخل الرموز مثل : {} , “ “ , () , `` , <> أو حتى تضمينها كذلك.

التعديل

1. تعديل ما بداخل الرمزين {}:

يمكنك تعديل ما بداخل الرمزين { و } ببساطة وذلك باستعمال الأمر التالي:

ci{ أو ci}

ملاحظة: يجب على المؤشّر أن يكون إما على أحد الرمزين أو داخلهما (الملاحظة تنطبق على جميع الأوامر أسفله).

2. تعديل ما بداخل الرمزين <>:

يمكن ذلك بنفس الطريقة:

ci< أو ci>

بنفس الطريقة يمكن تعديل ما بداخل الأقواس ():

ci( أو ci)

3. تعديل ما بداخل علامات التنصيص " أو ' أو ` :

ci'أو ci” أو ci`

4. تعديل ما بداخل وسوم HTML:

يمكن أيضاً تعديل ما بداخل وسوم HTML بالأمر التالي:

cit

الحذف

الحذف يكون بنفس طريقة التعديل، فقط استبدِل c ب d، مثلا لحذف ما بداخل الرمزين {}:

di{ أو di}

أما لحذف ما بداخل وسوم HTML:

dit

النسخ

النسخ كذلك يتّبع نفس المنطق فقط استعمل y عوضا عن c و d مثلا لنسخ ما بداخل الأقواس ():

yi( أو yi)

في جميع الأوامر السّابقة تعلّمنا كيف ننسخ ما بالداخل فقط، فماذا لو أردنا تعديل، حذف أو نسخ العلامة أيضا؟ لفعل ذلك فقط استبدل i بـِ a، إليك مثالاً على ذلك:

لنقل أنّنا نملك ملفّا يحتوي على الآتي:

if (x == 0)

إذا طبّقنا الأمر(المؤشّر على أحد القوسين أو بداخلهما):

di)

سيقوم المحرر بحذف "x == 0".

أمّا لو طبّقنا الأمر:

da)

فسيقوم المحرّر بحذف "(x == 0)".

وقِسْ على ذلك بقيّة الأوامر(التّعديل والنّسخ).

المسافة البادئة للنّصوص (text indent)

المسافة البادئة للأسطر تعدّ من أهمّ ما يجبُ على المبرمج الاهتمام به، إذ أن الشيفرة النّقيّة تعتبر أساساً لتحديد مدى مهارة المُبرمج، وليتمكّن الآخرون من فهم ما كتبه خاصّة إذا كان يعملُ في مشروع مفتوح المصدر.

مثال على استعمال المسافات البادئة:

if ...
// ...
else
// ...
end

في المثال أعلاه كتبنا جملة شرطية بدون أي مسافات بادئة.

if ...
    // ...
else
    // ...
end

أما في هذا المثال فقد قمنا بوضع مسافات بادئة لمزيد من التنسيق ولك أن تلاحظ الفرق.كما أن هناك لغات تُجبرُك على التّنسيق باستخدام المسافات البادئة (مثل Python) وإلا فلن يعمل البرنامج.

في vim هناك العديد من الخيارات للتحكّم بالمسافات البادئة، أولا عليك تفعيل خيار "المسافات البادئة الذكيّ" (Smart indent)، ومن المفضّل أن تضعه في ملفّ vimrc:

:set smartindent

ضبط عرض المسافة البادئة

أقصدُ بعرض المسافة البادئة، المسافة التي ستكون بين بداية السطر والكتابة (اُنظر المثال):

هذا نص بمسافة بادئة تساوي 0
 هذا نص بمسافة بادئة تساوي 1
    هذا نص بمسافة بادئة تساوي 4
          هذا نص بمسافة بادئة تساوي 10

لِضبط المسافة البادئة في vim طبّق الأمر التالي:

:set shiftwidth=x

حيث x عرض المسافة البادئة، من المُفضّل أن يكون 4 فقط.

:set shiftwidth=4

لوضع مسافة بادئة لسطرٍ ما استخدم:

>

ولإلغاء المسافة البادئة:

<

لوضع مسافة بادئة لمجموعة من الأسطُر:

vjjj>

حيث v للولوج إلى الوضع المرئي وj للانتقال للأسفل.

لوضع مسافة بادئة لما بداخل المعقوفات ({})، إذا كان لديك جملة شرطيّة مثلا في لغة جافاسكريبت:

function foo(){
//...
//...
//...
//...
}

قد ترغب في وضع مسافة بادئة لجميع الأسطر التي تتواجد داخل علامتي { ... } للقيام بذلك ضع المؤشّر على إحدى العلامتين وقم بالضغط على:

>i}

النتيجة ستكون كالتالي:

function foo(){
    //...
    //...
    //...
    //...
}

أمّا إذا أردت أن تنسّق الملف بكاملهِ في آن واحد فالأمر التالي سيُعطيكَ ما تريده:

gg=G

حيثُ gg لتحريك المؤشّر إلى أعلى الملفّ و = لإضافة المسافة البادئة وG للانتقال إلى آخر الملفّ.

تخصيص مظهر vim

محرّرvim يعتمِد مبدأ البساطة، لكن هذا لا يجعله غير قابل على تخصيص مظهره، بل تستطيع أن تجعل المحرّر فخماً وذا تصميمٍ مُبتكرٍ خاصّة مع الكمّ الكبير من السمات المتاحة له، إذ أن هناك مبرمجون من مختلف أنحاء العالم ينشُرونَ سماتٍ للمُحرّر، وسنكشف بعضاً منها في هذه الفقرة.

1. تنصيب السّمات

تنصيب السّمات على محرّر vim سهلٌ جدّاً، ولكنّه يختلف من نِظام تشغيل إلى آخر.

لمستخدمي Gnu/Linux أو Mac OS

قُم بتحميل المِلفّات (ملفّ واحد في غالب الأحيان) ثمّ اُنقل الملفّات بامتداد vim (مثلا color.vim) إلى المسار التالي :

~/.vim/colors/

ملاحظة: علامةُ ~ اختصار يُمثّل مُجلّد المنزل الخاصّ بك.

إذا لم يكن مُجلّد colors داخل مجلّد vim. ( المجلّد مخفيّ افتراضياً في متصفّح الملفّات لإظهاره اضغط Ctrl+h) موجوداً فقم بإنشائه. أو طبّق الأمر التالي في الطرفية (Terminal):

mkdir ~/.vim/colors

لمستخدمي Windows

هذا هو مسار مُجلّد vim. :

%userprofile%\vimfiles

كل ما عليك فعله هو الذهاب إلى قائمة" ابدأ" (start) ثمّ " تشغيل" (run) بعد ذلك ألصق الأمر التالي:

%userprofile%

ثمّ قم بإنشاء مجلد vimfiles، وبعد ذلك أنشئ مجلّداً باسم colors هذا هو المجلّد الذي سنقوم بنقل ملفات السمات داخله.

2. تفعيل السّمات والتبديل بينها

الآن أنت جاهز لتفعيل السمات التي قمت بتحميلها (لا تقلق أنت لم تحمّل شيئا بعد)، بعد إكمال عمليّة نقل الملفّات المناسبة (ذات امتداد vim) إلى مجلد

.vim/colors

أو

%userprofile%\vimfiles\colors

يمكنك مباشرة فتح vim وتجربة السّمة التي ثبّتها بالأمر:

:colorscheme theme

سيتغيّر المظهر لكنّ الأمر لن يُحفَظ لحفظه ولإبقاء المظهر في كل مرة تفتح ملفّا في vim عليك إضافة السطر التالي في vimrc. :

colorscheme theme

بالطبع مع تغيير theme إلى اسم السّمة.

3. السّمات الافتراضيّة

لنتحدّث الآن عن سمات المحرّر، في vim هناك سمات افتراضية موجودة أصلاً ولا تحتاج إلى تحميل يمكنك معاينتها وانظُر أأعجبتكَ أم تريد شيئا أفضل:

سمة desert

سمة blue

سمة darkblue

سمة delek

سمة elflord

سمة morning

سمة pablo

سمة slate

هناك المزيد والمزيد من السّمات التي يُوفّرها لك المحرّر يمكنك تصفحها عبر الأمر:

:colorscheme <tab>

تحميل السّمات

إن لم يُعجبك أي مظهر من مظاهر المحرّر الموجودة أعلاه، لا تقلق لا يزال هناك أمل، سأسرد لك بعضا من السّمات الموجودة خارج المحرّر وعليك تحميلها إذا أردت تفعيلها.

وكما قلت سابقا لتفعيل أيّ سمة يكفي أن تنقل الملفّ بامتداد vim إلى مجلّد colors ثم نفّذ الأمر:

:colorscheme theme

حيثُ theme هو اسم الملف، مثلا إذا كان اسم الملفّ color.vim فيكفي أن تغيّر theme إلى color، ولإبقاء السّمة، أضف السّطر إلى ملفّ vimrc..

سمة Guardian

هذه أحد السمات التي يمكن تحميلها مثلا، ثم تنصيبها بالطريقة التي قمنا بشرحها أعلاه:

سمة Github

هذه سمةٌ أخرى يُمكن تحميلها شبيهة بسمة موقع Github.

سمة Vividchalk

لتحميل السمة.

سمة Candy

تحميل السّمة

ختاما

لقد تعرّفنا في هذا الدرس على قدراتِ vim المتقدّمة في التّحرير والتّعامل مع مختلف أنواع النّصوص والجمل، وأيضاً على طرق لتخصيص المحرّر، ولكنّه يحوي أكثر من هذا كلّه خاصّة أنّه مليء بالمفاجآت، والإضافات التي تستطيع أن تجعله أكثر من مجرّد محرّر!

الأدوات التي تُساعد المُبرمج في عمله كثيرة ومتعددّة، وهي التي تكون سببا إما في زيّادة أو تقليص إنتاجيته وسرعة عمله، لذلك فمن المهم اختيّار الأدوات بعناية، والمحرر أهم هذه الأدوات، إذ به تنجز معظم عملك البرمجي ولا يمكن لأيّ مبرمج العيش بدون محرّر. في هذا المقال سنطّلع معا على محرّر Vim الذي يعتبر من أشهر المحررات والذي يستخدمه عدد كبير من المبرمجين من مختلف أنحاء العالم في تعاملهم مع لغات البرمجة المختلفة؛ قد تصدمك حقيقة أن vim أُطلق منذ أكثر من 23 عاما، ولكنه لم يَشِخ بعد، فمُجتمَعُهُ لا زال يكبر يوما بعد يوم، ومعظم المبرمجين المعروفين يستخدمونه ويعتمدون عليه في تحرير شِفراتهم.

تَعَلُّمُ كيفية التّعامُلِ مع محرّر نصوص؟

نعم لا حرج في ذلك، في الحقيقة عندما تستعمل شيئا ما لساعات طِوال لا بد أن تتعلّم كيف تكون أسرع في إنجاز العمل، ولذلك فإن تعلّم محرّر vim يستحق منك أن تعطيه شيئا من وقتك! ففي النهاية النّتائج هي المهمّة وما تريد أن تصل إليه هو التّعامل مع الملفات البرمجية بشكل أسرع وأكثر إنتاجية.

لماذا vim ؟

معظم الذين يجربون هذا المحرر لأول مرة سرعان ما ينعتونه ب “محرّر من العصر الحجري” خاصة بواجهته التي قد تبدو للوهلة الأولى “سيّئة”، والكثير ممّن لا يعرفونه جيّدا يقولون أنه لا يستحق أن يسمى محرّرا إمّا لصعوبة أوامره أو لأسباب أخرى عادة ما تكون مبنية على قلّة المعرفة، فالأوامر ليست صعبة وتستحقّ منك تعلّمها بكلّ تأكيد.

لقد وقعتُ في هذا الفخ لكنّني سرعان ما سحبت كلامي بعد أن علمت أنّه من المحرّرات الأكثر استعمالا من طرف المبرمجين، مُدراء الخواديم،  بل ويستخدمه عدد لا بأس به من الكتّاب (بالّلغة الإنجليزيّة) للتّدوين في مدوناتهم أو كتابة مقالات وغير ذلك، ولا أظنّني أملك مخزونا كافيّا من الكلمات لوصفه فهو في النّهاية المحرّر الغامض الذي ستتعلّم المزيد عنه كل يوم.

معظم الذين يقولون أن المحرّر سيّء لم يجرّبوه في الأساس أو أنّهم لم يدرسوه بشكل جدي، الشّيء الذي ستتفاداه أنت بعد قراءتك لهذا الدّرس. وإليك بعضا من الأسباب التي قد تدفعك إلى تعلّمه

1. لأنّه ممتع

أهمّ الأساب التي قد تدفعك لتعلّم vim هو المتعة التي ترافقك أثناء كتابة شيفراتك البرمجية وتعديلها، عند تعَوّدِكَ على إستعمال المحرر ستصل إلى مرحلة يكون فيها التحرير كلعبة بين يديك.

2. لأن الكثير من المبرمجين يستعملونه

محرر vim ليس مجرد محررًا بسيطًا، بل هو محرر ذو قدرات عالية وخير دليل على ذلك هو العدد الكبير من المبرمجين الذين يستعملونه، إذ في أحد الإحصائيات فإن أكثر من نصف مبرمجي لغة Ruby وهي لغة كائنية OOP يستعملون vim وحوالي الثلث من مبرمجي Python أيضا يستعملون Vim.

الإحصائيتان شملتا عددا من مبرمجي لغتي Ruby وPython فقط وهما لغتان رغم شهرتها إلا أنهما تبقيان أقل شهرة من لغات كـ ++C ، C  وJavascript وغيرهم، فما بالك بعدد المستخدمين من المبرمجين باللغات الأخرى.

3. لأنّه قابل للتّخصيص

يمكنك تخصيص vim إلى درجة كبيرة حيث يمكنك تغيير الأوامر أو إضافة أخرى جديدة بالإضافة إلى كمية الإضافات الهائلة المتاحة له والتي تجعله قادرا على تنفيذ مهام ووظائف جديدة تُبرمج هذه الإضافات بلغة خاصة تسمى فيمسكريبت vimscript كما يدعم برمجة الإضافات بلغات أخرى مثل (python ; ruby ; tcl ; lua ..)

الخلاصة هنا أن محرر Vim يتمتع بالشهرة والكفاءة وقابلية الإستخدام التي ستدفعك إلى تجربته وتعلّم التّعامل معه ففي النهاية إتقان مهارة جديدة أمر يصقل خبرات المبرمج.

تنصيب المحرر

لتنصيبه على توزيعات جنو/لينكس المبنية على الدبيان (Ubuntu ،Linux Mint ،Elementary OS...)، طبّق هذا الأمر في الطرفية Terminal:

$ sudo apt-get install vim

لتنصيبه على توزيعة فيدورا، طبق هذا الأمر في الطرفية Terminal:

$ sudo yum install vim

لتنصيبه على Windows، يمكنك تحميل Gvim، ولتنصيبه على Mac فإن Vim يأتي مثبتا مُسبقا على أنظمة الماك، لذلك كل ما عليك فعله هو كتابة vim في الطرفية Terminal لتشغيله.

أهم الأوامر قبل فتح ملفّ

يمكنك فتح أي ملف تريده من الطّرفية Terminal بكتابة:

vim file.txt

غيّر file.txt إلى الملف الذي ترغب في فتحه إن لم يكن موجودا فسيُنشئ vim ملفا بذلك الإسم.

ملاحظة: إذا كنت على لينكس أو Mac فتأكّد من أنك على المجلد الصحيح بإستخدام أمر pwd ويمكنك إستخدام أمر ls لعرض الملفات المتاحة كما تستطيع التنقل بين المجلدات بإستخدام:

cd directory

مع تغيير directory إلى إسم المجلّد وللرّجوع إستخدم:

cd ..

وللرّجوع إلى مجلّد المنزل قم بإدخال أمر cd فقط

أول ما ستقوم به عند فتح vim هو الضغط على زر  وهو الذي سيمكنك من الدخول إلى نمط الكتابة ويمكنك كتابة ماتشاء في الملف.

• [ i] للدخول إلى نمط الكتابة إضغط على.
• [o]  للدخول إلى نمط الكتابة في سطر جديد.
• [Esc] للخروج من نمط الكتابة إلى نمط الأوامر.
• [v] للدخول إلى النمط المرئي ومنه يمكنك تحديد نص أو مجموعة كلمات.

أنماط (أوضاع) Vim

نمط الكتابة Insert mode

نمط الكتابة يمَكّنكَ من كتابة وتعديل ما تشاء. وهو النمط الأساسي (الجزء الذي لا يحتاج إلى تعلّمه).

النمط المرئي Visual mode

في النمط المرئي يمكنك تحديد النصوص والكلمات بإستعمال طُرق الإنتقال (التي سنذكرها لاحقا)، وتطبيق الأوامر عليها سواء حذفها أو نسخها أو تعديلها...

نمط الأوامر Command mode

نمط الأوامر هو النّمط الذي يخوّل لك إعطاء الأوامر للمحرر, سواء كان حذف كلمة أو حذف جملة أو تغيير شيء ما أو أي شيء من هذا القبيل وهو النمط الإفتراضي.

أوامر Vim

فتح ملف بإسمه (إذا كان موجودا في نفس المجلد):

:e file.txt

إذا كان في مجلد آخر:

:e directory/file.txt

إذا أردت تصفح الملفات الموجودة وإختيّار ملف:

:e .

للحفظ تحت إسم آخر:

:w إسم_الملف

حفظ الملف:

:w

الحفظ والمغادرة:

:wq

المغادرة بدون حفظ:

:q!

إستعمال أوامر النظام داخل vim

يمكنك إستعمال أوامر النظام في vim كالتالي:

:! cmnd

مثلا لنقل أنك تعمل على صفحة Html وتريد عرضها بمتصفح فايرفوكس، كل ما عليك فعله هو:

:! firefox index.html

يمكنك الإنتقال بين الأحرف باستخدام الأسهم على لوحة المفاتيح أو يمكنك استعمال الأحرف:

k أعلى

j أسفل

h يسار

l يمين

تستطيع القفز من مكان إلى آخر بإضافة عدد الأحرف أو الأسطر المراد تجاوزها قبل كل سهم، مثلا إذا أردت الإنتقال 20 حرفا إلى اليمين:

20l

الإنتقال 35 سطرا إلى الأسفل:

35j

الإنتقال إلى بداية الملف:

gg

الإنتقال إلى نهاية الملف:

G

الإنتقال إلى بداية السطر:

0

الإنتقال إلى نهاية السطر:

$

الإنتقال إلى سطر معين (السطر 15 في هذا المثال):

15gg

للتراجع عن تعديل:

u

للتراجع عن التراجع:

Ctrl + r

نسخ سطر:

yy

حذف سطر:

dd

نسخ، حذف عدد من الأسطر (4 في هذا المثال):

4dd
4yy

حذف كلمة (ضع المؤشر على أول الكلمة):

dw
yw للنسخ

للقص يمكنك إستبدال d و y بـِ x

للصق الجزء المنسوخ أو المقصوص:

p

لتحديد جزء من النّص:

أدخل إلى النمط المرئي بإستعمال Ctrl + v ثم إنتقل بإستخدام الأحرف hjkl أو الأسهم لتحديد ما تريد.

التعامل مع النص المحدد:

للتعامل مع النص المحدد يمكنك ببساطة إستعمال الأحرف y للنسخ و d للحذف و x للقص.

وللبحث عن نص ما:

/Search_query

إستبدل Search_query بما تبحث عنه.

التعامل مع عدة ملفات في آن واحد:

يمكنك تقسيم الشاشة إلى ما تشاء من الأجزاء والتعامل مع الملفات - الأمر أشبه بالنوافذ المبوبة tabs (الموجودة كذلك في vim).

لتقسيم الشاشة أفقيا :

:sp

عموديا :

:vs

للتّنقل بين أقسام الشاشة :

Ctrl + ww

أو:

Ctrl + w + الأسهم

التّبويبات Tabs

لفتح عدّة ملفات كل ملف في تبويبة يمكنك تنفيذ الأمر التالي (في الطّرفيّة Terminal):

$ vim -p file1 file2 file3

إنشاء نافذة جديدة:

:tabnew

إغلاقها:

:tabc

الإنتقال إلى التّبويبة التالية:

:tabn (n إختصارا ل next)

الإنتقال إلى التّبويبة السابقة:

:tabp (p إختصار ل previous)

يمكن إستعمال الأرقام فمثلا للقفز إلى التّبويبة الثالثة:

:tabn3

الذهاب إلى التّبويبة الأخيرة:

:tabl

الرجوع إلى التّبويبة الأولى:

:tabr

لعرض التّبويبات:

:tabs

التّعامل مع التّبويبات هكذا أمر متعب أليس كذلك ؟

كل ما عليك فعله هو إنشاء إختصارات لها وهذا سكريبت جاهز يقوم بالأمر:

فقط أضف الأسطر إلى ملف vimrc. الموجود في مجلّد المنزل HOME$ (ربما قد لا يكون موجودا، عليك إنشاءه إن لم يكن موجودا):

map <C-t><up> :tabr<cr>
map <C-t><down> :tabl<cr>
map <C-t><left> :tabp<cr>
map <C-t><right> :tabn<cr>

ملاحظة: بما أن الملف يبدأ بنقطة فهو مخفي، إذا حاولت رؤيته من متصفح ملفات فعليك أن تظهر الملفات المخفية (Ctrl+h).

ملاحظة لمستخدمي Windows، للحصول على ملف vimrc عليك القيام بالتالي:

افتح قائمة ابدأ (start) ثمّ "تشغيل" (run) بعد ذلك ألصق الأمر التالي:

%userprofile%

ثمّ قم بإنشاء ملفّ باسم:

_vimrc

الإختصارات الآن هي كالتالي :

Ctrl + t + الأسهم

الأعلى والأسفل للتنقل بين التبويبة الأولى والأخيرة على التوالي، وأما الأسهم يمين ،يسار فهي للتنقل بين التبويبات بشكل عادي (التالية ، السابقة).

بعض الأسطر التي قد تَوَدُّ إضافتها لملف vimrc.

set encoding=utf-8
set number
set hlsearch
set hlsearch لتضليل النص الذي تبحث عنه
set number لإضافة الأرقام في الجانب

ملاحظة: يمكنك إظهار الترقيم فقط بكتابة:

:set number

وهذه صورة للمحرر بعد إضافة setnumber إلى ملف vimrc:

خاتمة

vim يمتلك العديد من الأوامر والمميزات، العديد منها بحيث لا يستطيع مقال واحد شرحها، لذلك فهذا المقال مجرد مدخل إلى عالم محرر Vim و أنصحك بقراءة المزيد عنه إذا كنت مهتما، سنتعرف في الجزء الثاني من أساسيات Vim عن معلومات إضافية عن هذا المحرر وكيفية تطويعه لمتطلباتك اليومية.

تتألّف صفحات الويب التي نراها على المتصفح من مكوِّنات متعددة؛ كأطر العمل والمكتبات وملفات JavaScript وCSS وغيرها.

‏Bower‏ أداة لإدارة هذه المكوِّنات (أو الحزم) المُخصّصة للويب، كالتثبيت والتحديث والحذف وغيرها من عمليات الإدارة.

يشبه Bower إلى حد كبير الأدوات المخصّصة لإدارة الحزم في لغات برمجة آخرى، مثل gem للغة Ruby وComposer لـPHP وnpm لـNode.js.

لكن ما الفائدة منه؟ ألا يمكنني متابعة عملي كما اعتدت من دونه؟

يمكننا الاستفادة من أداة Bower في عدّة أمور، فلنفرض أن مشروعك القادم يحتاج إلى استخدام مكتبة jQuery‏ وإطار عمل Twitter Bootstrap‏ وخطّ الأيقونات Font Awesome‏.

لتنزيل كل واحدة من المُتطلّبات يقوم المطور بما يلي:

• الذهاب إلى موقع المكتبة أو إطار العمل
• التوجه إلى زرّ التحميل
• تحميل الملف المضغوط
• فك ضغط الملف المضغوط في مجلد المشروع

لو كان المشروع يحتاج إلى 3 أدوات فقط سيقوم المطور بتكرار الخطوات السابقة 3 مرات، ولو كان يحتاج 10 أدوات سيقوم بتكرار الخطوات ذاتها 10 مرات! هل ترى حجم العمل المطلوب فقط لتحميل المُتطلّبات؟

دعنا نرَ كيف يمكن ﻷداة Bower أن تساعدنا في اختصار الوقت. بعد تثبيت الأداة على الحاسوب، يمكن تنزيل جميع ما سبق باستخدام الأمر التالي:

bower install jquery bootstrap fontawesome

هذا كل ما في الأمر. بهذا نكون قمنا بتثبيت المُتطلّبات الثلاثة معاً، ويمكن البدء باستخدامها دون هدر وقت بتكرار الخطوات التقليدية. ومهما ازداد عدد المُتطلّبات يبقى تثبيتها بهذه الطريقة البسيطة نفسها.

من ميزات هذه الأداة تحديد الإصدار المطلوب للمكوِّنات (سواء كانت مكتبات أو أطر العمل). إن كنتَ تريد مثلاً الإصدار رقم 3.1.1 من إطار عمل Twitter Bootstrap فيمكن أن تحدد هذا في أمر التثبيت نفسه، أما بالطريقة التقليدية فتحتاج إلى البحث هنا وهناك لتجد مبتغاك!

ملاحظة: سنأتي لطريقة الاستخدام بالتفصيل، الأمثلة السابقة فقط لتوضيح الفوائد والميزات التي يقدمها Bower.

من يستخدم Bower؟

الكثير من أطر العمل والمكتبات تستخدم Bower، على سبيل المثال:

• ‏Twitter Bootstrap‏ إطار العمل الشهير، مخصّص لإنشاء الواجهات وعناصر الويب.
• ‏Foundation‏ إطار عمل شبيه بـTwitter Bootstrap.
• ‏jQuery‏ مكتبة JavaScript الشهيرة.
• ‏Angular JS‏ مكتبة JavaScript لإنشاء تطبيقات وحيدة الصفحة (single-page applications).
• ‏Backbone‏ مكتبة JavaScript لإنشاء تطبيقات ويب بنمط MVC.

نجد أن معظم إضافات وتحسينات أطر العمل والمكتبات الشهيرة تستخدم هذه الأداة، وذلك كي تضمن استخدام نسخة محددة من إطار العمل أو المكتبة التي تم إنشاء هذه الإضافة لها. لتجنب مشاكل التوافقيّة بينها.

كيف أبدأ؟

مُتطلّبات الاستخدام

يحتاج Bower إلى وجود بيئة Node.js مع مدير الحزم الخاصّ بها npm وإلى نظام git على الحاسوب المراد تثبيت الأداة عليه.

تثبيت NodeJS

بالنسبة لمستخدمي Windows وMac OS، يمكن التوجه لموقع Node.js‏ وتنزيل ملف التثبيت المناسب حسب نظام التشغيل.

إن كنت تعمل على Linux يمكنك اتباع الطريقة السابقة. أو يمكن تثبيت Node.js عن طريق المستودعات الخاصّة بنظام التشغيل، مثلاً إن كنت تستخدم Ubuntu أو أحد مشتقاته، يمكن تثبيت Node.js عن طريق سطر الأوامر:

sudo apt-get install nodejs npm

تثبيت git

بطريقة مشابهة لتثبيت Node.js، يمكن التوجه لموقع git الرسمي وتنزيل ملف التثبيت المناسب لنظام التشغيل.

إن كنت تعمل على توزيعة Linux يمكن تثبيت git باستخدام المستودعات الخاصّة بنظام التشغيل، في حال استخدام توزيعة Ubuntu أو أحد مشتقاتها، يمكن تثبيت git عن طريق الأمر:

sudo apt-get install git

سطر الأوامر

إن كنت تعمل على Windows فسطر الأوامر هو واجهة DOS أو اختصاراً هو cmd. وإن كنت تعمل على Linux فهناك عدد من البرامج للتعامل مع سطر الأوامر أشهرها GNOME Terminal بحسب التوزيعة والواجهة التي تستخدمها. وإن كنت تعمل على Mac OS فيمكن أن تستخدم iTerm.

التثبيت

بعد التأكد من وجود المُتطلّبات على حاسوبك، ما عليك سوى فتح سطر الأوامر (command line) ثمّ كتابة الأمر:

npm install -g bower

ملاحظة: إن كنت تعمل على نظام Linux أو Mac OS وفشلت عملية التثبيت قد تحتاج لإضافة أمر sudo في البداية ليتم استخدام صلاحيات الجذر (root) في التثبيت، فيصبح الأمر:

sudo npm install -g bower

تهانينا! أصبحت أداة Bower موجودة على حاسوبك وقابلة للاستخدام. تابع معنا كيف تستخدمها.

استخدام Bower

أداة Bower هي أداة تعمل في سطر الأوامر، جميع الأوامر التي سنستخدمها تحتاج إلى كتابتها في سطر الأوامر (Command Line).

لنقم بفتح سطر الأوامر، ولنقم بإنشاء مجلد اسمه bower_tutorials ثمّ نتوجه إليه في المكان الذي قمنا بإنشاء المجلد فيه:

cd /home/ammar/www/bower_tutorials/

أصبحنا الآن جاهزين لبدء استخدام Bower.

1. تثبيت الحزم

ما رأيك لو نقوم بتثبيت jQuery الشهيرة؟ أمر سهل، لنكتب هذا الأمر في سطر الأوامر:

bower install jquery

أصبحت مكتبة jQuery الشهيرة موجودة في المجلد الذي أنشأته، داخل مجلد اسمه bower_components.

حسناً، لنقم بتثبيت إطار عمل Twitter Bootstrap لكن بنسخة قديمة هي 3.1.1، يمكن ذلك عن طريق:

bower install bootstrap#3.1.1

أصبح Twitter Bootstrap بنسخته القديمة 3.1.1 جاهزاً، ما رأيكم بسهولة الأمر مقارنة بالطريقة التقليدية؟

في الطريقة الأولى عندما قمنا بتثبيت jQuery لم نقم بتحديد الإصدار الذي نريده. في هذه الحالة يقوم Bower تلقائياً بتحميل آخر نسخة من المكوّن المطلوب. ويمكن أيضاً أن نفعل كما في المثال الثاني حيث قمنا بتحديد النسخة المطلوبة بذاتها.

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

قد يحدث أن تقوم بطلب تثبيت حزمة أو مكوّن ولا يتم تثبيته، يمكن أن تتأكد من وجود الحزمة عن طريق البحث. لنبحث عن Bootstrap ولنرَ ماذا يحوي مستودع Bower، نكتب:

bower search bootstrap

نرى عدداً كبيراً من نتائج البحث ظهرت في سطر الأوامر، كيف نعرف ما هي الحزمة التي نريدها من بين كل تلك الحزم؟ إن كنا نريد تثبيت مكوّن شهير، فغالباً ما تكون أول نتيجة بحث هي الحزمة المطلوبة، أول نتيجة تظهر في البحث السابق هي:

    bootstrap git://github.com/twbs/bootstrap.git

نستفيد من البحث في حال كنا نبحث عن نسخة من الحزمة المطلوبة، أو عن إضافة لها، فمثلاً نجد ضمن نتائج البحث:

bootstrap-sass-twbs git://github.com/twbs/bootstrap-sass.git

هذه نسخة رسمية من Twitter Bootstrap لكنها مخصّصة للعمل مع Sass بدلاً من ملفات CSS جاهزة.

3. حذف الحزم

بعد أن أصبح تثبيت الحزم واضحاً، ماذا لو قمتَ بتثبيت حزمة ثمّ لم تعد تريدها، أو قمتَ بتثبيت حزمة خاطِئة غير التي تريدها؟

لحذف الحزمة يمكن استخدام الأمر:

bower uninstall bootstrap-sass-twbs

كما يمكن حذف عدة حزم دفعة واحدة في نفس الأمر:

bower uninstall bootstrap jquery fontawesome

4. عن ملف bower.json: أهميته واستخداماته

لنفرض أنّك تعمل ضمن فريق، وقمتَ بتثبيت آخر نسخة من jQuery وآخر نسخة من Twitter Bootstrap، ثمّ بعد شهرين قام زميلك في العمل بتثبيت نفس الحزم. لكنّه تفاجئ أن هناك أخطاء بدأت بالظهور لم تكن تظهر من قبل. بدأ يبحث عن المشكلة وعن الحزم المنصبة، وجد أن إصدارات الحزم التي قام بتثبيتها تختلف عن إصدارات الحزم التي قمتَ بتثبيتها منذ شهرين، عندما كان المشروع يعمل بشكل جيد!

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

الحل للمثالين هو استخدام ملف bower.json.

ما هو هذا الملف؟ هو ملف يقوم بتعريف الحزم المستخدم في المشروع مع رقم الإصدار الخاصّ بكل حزمة، ثمّ يمكن تثبيت الحزم عن طريق الأمر:

bower install

هو نفسه أمر التثبيت لكن بدون ذكر أي حزم بعده، سيقوم عندها Bower بالبحث عن ملف bower.json وتثبيت الحزم المذكورة فيه حسب الإصدارات المذكورة.

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

كيفية إنشاء ملف bower.json ووضع الحزم المطلوبة بداخله

يمكن إنشاء ملف bower.json باستخدام أي محرر نصوص، لكن الطريقة الأفضل هي استخدام الأمر الخاصّ بإنشاءه عن طريق الأداة نفسها، كما يلي:

bower init

بعد ضغط زرّ Enter تظهر بضع أسئلة (خطوات)، يمكن أن يتم تجاهل الخطوات جميعها عدا الخطوة الأولى، فيجب ألا تكون فارغة. لكن الأفضل اتباع الخطوات والإجابة على الأسئلة جميعها حتى يصبح المشروع أوضح.

الخطوات هي:

? name: bower-introduction

يسأل هنا عن اسم المشروع، يجعل اسم المجلد الحالي هو اسم المشروع بشكل افتراضيّّ، إن تم ضغط زرّ Enter يتم استخدام اسم المجلد، أو يتم كتابة اسم المشروع ثمّ ضغط زرّ Enter.

? version: 0.0.0

يسأل هنا عن إصدار المشروع الجديد الذي تريد إنشاء ملف bower.json من أجله. بشكل افتراضيّ يكون الإصدار هو 0.0.0 ويمكن تغييره بكتابة رقم جديد وضغط زرّ Enter.

? description:

هنا نضع وصفاً للمشروع الحالي ثمّ نضغط زرّ Enter.

? main file:

هنا نضع الملف الرئيسي للمشروع مثلاً: index.html.

? what types of modules does this package expose?:

المقصود من هذا السؤال هو تحديد آلية عمل الوحدات المكوِّنة للمشروع (modules) عند كونه مشروع JavaScript متقدّماً.

تظهر في هذا السؤال 5 خيارات هي: amd وes6 وglobals وnode وyui. بشكل افتراضيّ لا يكون أي خيار منها محدداً. يمكن تحريك المؤشر باستخدام السهمين أعلى وأسفل، ثمّ ضغط زرّ المسافة لتحديد الخيار/الخيارات المطلوبة. ثمّ نضغط زرّ Enter للمتابعة إلى الخطوة التالية.

? keywords:

الكلمات المفتاحية للمشروع مفصولة بفواصل ,.

? authors: Ammar Alakkad <am.alakkad@gmail.com>

اسم أو أسماء المطورين للمشروع، يمكن أن يتم وضع اسم المطور يليه بريده الإلكتروني بين قوسين Name <email@example.com>‎. بشكل افتراضيّ يأخذ Bower الاسم والبريد الإلكتروني من إعدادات git الموجودة على الحاسوب.

? license: MIT

رخصة استخدام المشروع بشكل مختصر. إن كنت مهتمّاً بمعرفة أشهر الرخص ومتى تَستخدم كل واحدة يمكن الذهاب لموقع Choose an OSS license‏ يحوي توضيحاً بالإنكليزية.

? homepage:

رابط صفحة المشروع على الإنترنت إن وجدت.

? set currently installed components as dependencies?: Yes

إن كانت بعض الحزم قد ثُبتّت قبل إنشاء الملف، هل تريد أن يتم وضعها ضمن الحزم المطلوبة في الملف؟

? add commonly ignored files to ignore list?: Yes

إضافة الملفات المتعارف على إضافتها إلى لائحة التجاهل في ملف bower.json، عادة ما تكون هذه الملفات ملفات غير مفيدة لمستخدم الحزمة. لكن قد يكون مطور الحزمة المُستخدَمة قد أضافها إلى ملفات حزمته، كملفات التجارب، أو مجلد bower_components الخاص بالحزمة المطوَّرة.

? would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes

هل تريد جعل الحزمة خاصّة بحيث لا يتم إضافة على مستودعات Bower؟ الإجابة الافتراضيّة هي نعم. إن أردت أن تكون الحزمة خاصّة دون نشرها يمكن كتابة كلمة yes ثمّ ضغط زرّ Enter.

الفرق بين المُتطلّبات ومُتطلّبات التطوير

مُتطلّبات التطوير نستخدمها عند الرّغبة بالتطوير على المشروع نفسه، تحوي حزم مثل Unit Testing أو مُنشئ الوثائق (documentation).

المُتطلّبات هي الحزم المطلوبة لاستخدام المشروع. مثلاً عندما نستخدم إطار عمل Zurb Foundation نحتاج معه إلى مكتبة jQuery. جميع المُتطلّبات التي نحتاجها لتشغيل المشروع وليس إلى تطويره تعتبر من المُتطلّبات.

5. هل يمكن تثبيت الحزم في مجلد مختلف؟

قد يرغب البعض بعدم تسمية مجلد الحزم بالاسم الافتراضيّ bower_components ويريد تغييره. لا يجب تغيير هذا الاسم عن طريق إعادة التسمية، بل يتم إضافة ملف آخر يوضع فيه اسم المجلد المرغوب بوضع الحزم بداخله.

نقوم بإنشاء ملف باسم ‎.bowerrc نضع بداخله:

{
    {
        "directory": "my_components"
    }
}

بهذا عند تثبيت أو تحديث الحزم، سيتم وضعها في مجلد my_components بدلاً من المجلد الافتراضيّّ.

6. هل هناك أدوات تدعم وتتناغم مع Bower؟

هناك عدد من الأدوات التي تدعم Bower منها:

• ‏CodeKit‏ تطبيق لنظام تشغيل Mac OS مخصّص لإنشاء المواقع.
• ‏Sublime Bower‏ إضافة لمحرر النصوص الشهير Sublime Text تسمح بتثبيت الحزم من خلال البرنامج نفسه.
• ‏Atom Bower Install‏ إضافة لمحرر Atom مفتوح المصدر تقوم بتثبيت الحزم من خلال البرنامج نفسه.
• ‏WebStorm‏ بيئة متكاملة لتطوير مواقع الويب تتميز بتكامل قويّ جداً مع JavaScript، يملك هذا البرنامج دعماً مدمجاً به لأداة Bower.
• ‏Visual Studio 2015‏ النسخة الأخيرة من Visual Studio مدمجة مع دعم لأداة Bower للبحث وتثبيت الحزم.
• ‏Package Intellisense for Visual Studio 2013‏ إضافة مخصّصة لـ Visual Studio لإضافة دعم مدير حزم Node.js مع أداة Bower.

هناك أيضاً عدد من الإضافات الخاصّة بمشغّلات المهام Grunt وGulp وbroccoli.

أي نوع من المشاريع يمكنني استخدام Bower معه؟

يمكنك استخدام Bower في أي مشروع ويب يحتاج إلى واجهاتٍ تظهر للمستخدم (front-end). سواء كانت المكوِّنات للاستخدام المباشر أو لمعالجتها واستخدامها في بناء مكوّنات مخصّصة بناءً على مُتطلّبات التصميم.

كما قرأنا معاً، Bower أداة بسيطة الاستخدام، تساعد بإدارة الحزم الخاصّة بمشاريع الويب، بشكل يسهّل استخدامها ويضمن الحصول على الإصدارات المطلوبة. كما يسهّل تعامل عدد من المطورين معاً في نفس المشروع، عن طريق حصولهم على نفس المُتطلّبات بالإصدارات المحددة.

أرجو أن تكونوا قد استفدتم من هذا الشرح، في حال وجود أيّ استفسار أو تساؤل لا تتردّدوا بوضعه في التعليقات.