الفرق بين المراجعتين ل"Bootstrap/build tools"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'تعلّم كيف تستخدم [https://docs.npmjs.com/misc/scripts سكربتات npm] المُضمَّنة في Bootstrap لإنشاء توليد التوثيق،...') |
|||
| سطر 1: | سطر 1: | ||
| − | تعلّم كيف تستخدم [https://docs.npmjs.com/misc/scripts سكربتات npm] المُضمَّنة في [[Bootstrap]] | + | تعلّم كيف تستخدم [https://docs.npmjs.com/misc/scripts سكربتات npm] المُضمَّنة في [[Bootstrap]] لتوليد التوثيق، وتجميع الشفرة المصدرية، وتشغيل الاختبارات وغير ذلك. |
== إعداد الأدوات == | == إعداد الأدوات == | ||
| − | يعتمد Bootstrap سكربتات npm في نظام البناء Build system الذي يستخدمه. يحوي الملفّ [https://github.com/twbs/bootstrap/blob/v4.0.0/package.json package.json] توابع Methods مفيدة للعمل مع إطار العمل، بما في ذلك تجميع الشفرة البرمجية، | + | يعتمد Bootstrap سكربتات npm في نظام البناء (Build system) الذي يستخدمه. يحوي الملفّ [https://github.com/twbs/bootstrap/blob/v4.0.0/package.json package.json] توابع (Methods) مفيدة للعمل مع إطار العمل، بما في ذلك تجميع الشفرة البرمجية، وتشغيل الاختبارات وغيرها. |
| − | يتطلّب استخدام نظام البناء في Bootstrap وتشغيل التوثيق محليًّا الحصولَ على نسخة من الملفات المصدرية لإطار العمل Bootstrap | + | يتطلّب استخدام نظام البناء في Bootstrap وتشغيل التوثيق محليًّا الحصولَ على نسخة من الملفات المصدرية لإطار العمل Bootstrap و Node. يُفتَرَض بتنفيذ الخطوات التالية أن يجعلك جاهزًا للبدء: |
| − | # [https://nodejs.org/download/ نزّل Node.js] وثبّته. يستخدم إطار العمل Bootstrap نظام برامج Node.js لإدارة اعتماديّاته | + | # [https://nodejs.org/download/ نزّل Node.js] وثبّته. يستخدم إطار العمل Bootstrap نظام برامج Node.js لإدارة اعتماديّاته (dependencies). |
| − | # انتقل إلى المجلَّد الرئيسي <code>/bootstrap</code> ونفّذ الأمر <code>npm install</code> لتثبيت اعتماديّات إطار العمل المحدَّدة في الملفّ package.json. | + | # انتقل إلى المجلَّد الرئيسي <code>/bootstrap</code> ونفّذ الأمر <code>npm install</code> لتثبيت اعتماديّات إطار العمل المحدَّدة في الملفّ package.json. |
| − | # [https://www.ruby-lang.org/en/documentation/installation ثبّت Ruby] ثم ثبّت [https://bundler.io/ Bundler] بالأمر <code>gem install bundler</code>؛ وأخيرًا نفّذ الأمر <code>bundle install</code> الذي سيثبّت جميع اعتماديّات [[Ruby]] مثل Jekyll والملحقات Plugins. '''ملحوظة لمستخدمي | + | # [https://www.ruby-lang.org/en/documentation/installation ثبّت Ruby] ثم ثبّت [https://bundler.io/ Bundler] بالأمر <code>gem install bundler</code>؛ وأخيرًا نفّذ الأمر <code>bundle install</code> الذي سيثبّت جميع اعتماديّات [[Ruby]] مثل Jekyll والملحقات Plugins. '''ملحوظة لمستخدمي ويندوز:''' اقرأ [https://jekyllrb.com/docs/windows/ هذا الدليل] للحصول على Jekyll وتشغيله دون مشكلات. |
ستصبح قادرًا بعد إكمال الخطوات السابقة على تشغيل مختلف الأوامر المذكورة هنا من سطر الأوامر. | ستصبح قادرًا بعد إكمال الخطوات السابقة على تشغيل مختلف الأوامر المذكورة هنا من سطر الأوامر. | ||
| سطر 17: | سطر 17: | ||
|- | |- | ||
|<code>npm run dist</code> | |<code>npm run dist</code> | ||
| − | |ينشئ الأمر <code>npm run dist</code> المجلّد <code>/dist</code> ويضع فيه الملفّات المجمَّعة. '''تستخدم هذه المهمة Sass و [https://github.com/postcss/autoprefixer Autoprefixer] و [https://github.com/mishoo/UglifyJS2 UglifyJS].''' | + | |ينشئ الأمر <code>npm run dist</code> المجلّد <code>/dist</code> ويضع فيه الملفّات المجمَّعة. '''تستخدم هذه المهمة Sass و [https://github.com/postcss/autoprefixer Autoprefixer] و [https://github.com/mishoo/UglifyJS2 UglifyJS].''' |
|- | |- | ||
|<code>npm test</code> | |<code>npm test</code> | ||
| سطر 28: | سطر 28: | ||
== Autoprefixer == | == Autoprefixer == | ||
| − | يستخدم إطار العمل Bootstrap الأداة [https://github.com/postcss/autoprefixer Autoprefixer] ضمن عمليّة البناء لإضافة | + | يستخدم إطار العمل Bootstrap الأداة [https://github.com/postcss/autoprefixer Autoprefixer] ضمن عمليّة البناء لإضافة البادئات الخاصة بالمتصفحات (vendor prefixes) تلقائيَّا إلى بعضٍ من خاصيّات [[CSS]] أثناء الإنشاء. تتيح هذه الطريقة لفريق عمل Bootstrap الاقتصاد في الوقت وكتابة الشفرة عن طريق كتابة الأجزاء الأساسية من [[CSS]] مرةً واحدةً والتخلّص من الحاجة للمخاليط (Mixins) مثل تلك الموجودة في الإصدار الثالث من إطار العمل Bootstrap. |
يحتفظ مطوّرو إطار العمل Bootstrap بقائمة من المتصفّحات المدعومة عن طريق Autoprefixer في ملفّ منفصل ضمن مستودع GitHub. راجع <code>[https://github.com/twbs/bootstrap/blob/v4.0.0/package.json package.json]</code> للمزيد من التفاصيل. | يحتفظ مطوّرو إطار العمل Bootstrap بقائمة من المتصفّحات المدعومة عن طريق Autoprefixer في ملفّ منفصل ضمن مستودع GitHub. راجع <code>[https://github.com/twbs/bootstrap/blob/v4.0.0/package.json package.json]</code> للمزيد من التفاصيل. | ||
== التوثيق المحلّي == | == التوثيق المحلّي == | ||
| − | يتطلّب تشغيلُ توثيق Bootstrap محليَّا استخدامَ Jekyll، وهو مولّد مواقع ثابتة | + | يتطلّب تشغيلُ توثيق Bootstrap محليَّا استخدامَ Jekyll، وهو مولّد مواقع ثابتة (static site generator) مرِن وموثوق يوفّر إمكانيّات مثل أساسيّات التضمين (include)، ملفّات تستند على صيغة Markdown، قوالب (templates) وغيرها. في ما يلي كيفية العمل: |
# ثبّت Jekyll (مولّد المواقع) واعتماديّات Ruby الأخرى بالأمر <code>bundle install</code> كما هو موضَّح في فقرة إعداد الأدوات أعلاه. | # ثبّت Jekyll (مولّد المواقع) واعتماديّات Ruby الأخرى بالأمر <code>bundle install</code> كما هو موضَّح في فقرة إعداد الأدوات أعلاه. | ||
| − | # نفّذ الأمر <code>npm run docs-serve</code> في سطر الأوامر | + | # نفّذ الأمر <code>npm run docs-serve</code> في سطر الأوامر انطلاقًا من المجلّد الرئيسي <code>/bootstrap</code>. |
# زر العنوان <code><nowiki>http://localhost:9001</nowiki></code> في المتصفّح. | # زر العنوان <code><nowiki>http://localhost:9001</nowiki></code> في المتصفّح. | ||
اقرأ المزيد عن Jekyll بقراءة [https://jekyllrb.com/docs/home/ توثيقه]. | اقرأ المزيد عن Jekyll بقراءة [https://jekyllrb.com/docs/home/ توثيقه]. | ||
مراجعة 15:51، 13 مارس 2018
تعلّم كيف تستخدم سكربتات npm المُضمَّنة في Bootstrap لتوليد التوثيق، وتجميع الشفرة المصدرية، وتشغيل الاختبارات وغير ذلك.
إعداد الأدوات
يعتمد Bootstrap سكربتات npm في نظام البناء (Build system) الذي يستخدمه. يحوي الملفّ package.json توابع (Methods) مفيدة للعمل مع إطار العمل، بما في ذلك تجميع الشفرة البرمجية، وتشغيل الاختبارات وغيرها.
يتطلّب استخدام نظام البناء في Bootstrap وتشغيل التوثيق محليًّا الحصولَ على نسخة من الملفات المصدرية لإطار العمل Bootstrap و Node. يُفتَرَض بتنفيذ الخطوات التالية أن يجعلك جاهزًا للبدء:
- نزّل Node.js وثبّته. يستخدم إطار العمل Bootstrap نظام برامج Node.js لإدارة اعتماديّاته (dependencies).
- انتقل إلى المجلَّد الرئيسي
/bootstrapونفّذ الأمرnpm installلتثبيت اعتماديّات إطار العمل المحدَّدة في الملفّ package.json. - ثبّت 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. راجع package.json للمزيد من التفاصيل.
التوثيق المحلّي
يتطلّب تشغيلُ توثيق Bootstrap محليَّا استخدامَ Jekyll، وهو مولّد مواقع ثابتة (static site generator) مرِن وموثوق يوفّر إمكانيّات مثل أساسيّات التضمين (include)، ملفّات تستند على صيغة Markdown، قوالب (templates) وغيرها. في ما يلي كيفية العمل:
- ثبّت Jekyll (مولّد المواقع) واعتماديّات Ruby الأخرى بالأمر
bundle installكما هو موضَّح في فقرة إعداد الأدوات أعلاه. - نفّذ الأمر
npm run docs-serveفي سطر الأوامر انطلاقًا من المجلّد الرئيسي /bootstrap. - زر العنوان
http://localhost:9001في المتصفّح.
اقرأ المزيد عن Jekyll بقراءة توثيقه.
إصلاح المشاكل
إن واجهت مشاكل أثناء تثبيت الاعتماديّات فستحتاج لإزالة جميع الإصدارات السابقة من الاعتماديّات (العامّة على النظام والمحليّة في المجلّدات)، ثم نفّذ الأمر npm install.
مصادر
- صفحة Build tools في توثيق Bootstrap.