أدوات البناء في إطار Bootstrap

من موسوعة حسوب

تعلّم كيف تستخدم سكربتات npm المُضمَّنة في Bootstrap لتوليد التوثيق، وتجميع الشفرة المصدرية، وتشغيل الاختبارات وغير ذلك.

إعداد الأدوات

يعتمد Bootstrap سكربتات npm في نظام البناء (Build system) الذي يستخدمه. يحوي الملفّ package.json توابع (Methods) مفيدة للعمل مع إطار العمل، بما في ذلك تجميع الشفرة البرمجية، وتشغيل الاختبارات وغيرها.

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

  1. نزّل Node.js وثبّته. يستخدم إطار العمل Bootstrap نظام برامج Node.js لإدارة اعتماديّاته (dependencies).
  2. انتقل إلى المجلَّد الرئيسي ‎/bootstrap ونفّذ الأمر npm install لتثبيت اعتماديّات إطار العمل المحدَّدة في الملفّ package.json.
  3. ثبّت Ruby ثم ثبّت Bundler بالأمر gem install bundler؛ وأخيرًا نفّذ الأمر bundle install الذي سيثبّت جميع اعتماديّات Ruby مثل Jekyll والملحقات Plugins. ملحوظة لمستخدمي ويندوز: اقرأ هذا الدليل للحصول على Jekyll وتشغيله دون مشكلات.

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

استخدام سكربتات NPM

يتضمّن الملف package.json الأوامر والمهامّ التاليّة:

المهمّة الوصف
npm run dist ينشئ الأمر npm run dist المجلّد ‎/dist ويضع فيه الملفّات المجمَّعة. تستخدم هذه المهمة Sass و Autoprefixer و UglifyJS.
npm test تشبه npm run dist لكن مع تشغيل الاختبارات محلّيًّا
npm run docs تجمّع CSS و JavaScript وتربطها من أجل التوثيق. يمكن تنفيذ التوثيق محلّيًّا بالأمر npm run docs-serve.

نفّذ الأمر npm run لعرض جميع سكربتات npm.

Autoprefixer

يستخدم إطار العمل Bootstrap الأداة Autoprefixer ضمن عمليّة البناء لإضافة البادئات الخاصة بالمتصفحات (vendor  prefixes) تلقائيَّا إلى بعضٍ من خاصيّات CSS أثناء الإنشاء. تتيح هذه الطريقة لفريق عمل Bootstrap الاقتصاد في الوقت وكتابة الشفرة عن طريق كتابة الأجزاء الأساسية من CSS مرةً واحدةً والتخلّص من الحاجة للمخاليط (Mixins) مثل تلك الموجودة في الإصدار الثالث من إطار العمل Bootstrap.

يحتفظ مطوّرو إطار العمل Bootstrap بقائمة من المتصفّحات المدعومة عن طريق Autoprefixer في ملفّ منفصل ضمن مستودع GitHub. راجع ‎.browserslistrc للمزيد من التفاصيل.

التوثيق المحلّي

يتطلّب تشغيلُ توثيق Bootstrap محليَّا استخدامَ Jekyll، وهو مولّد مواقع ثابتة (static site generator) مرِن وموثوق يوفّر إمكانيّات مثل أساسيّات التضمين (include)، ملفّات تستند على صيغة Markdown، قوالب (templates) وغيرها. في ما يلي كيفية العمل:

  1. ثبّت Jekyll (مولّد المواقع) واعتماديّات Ruby الأخرى بالأمر bundle install كما هو موضَّح في فقرة إعداد الأدوات أعلاه.
  2. نفّذ الأمر npm run docs-serve في سطر الأوامر انطلاقًا من المجلّد الرئيسي ‎/bootstrap.
  3. زر العنوان http://localhost:9001 في المتصفّح.

اقرأ المزيد عن Jekyll بقراءة توثيقه.

إصلاح المشاكل

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

مصادر