انتقل إلى المحتوى الرئيسي انتقل إلى التنقل في المستندات
View on GitHub

أدوات البناء

تعرف على كيفية استخدام npm scripts المشمولة في Bootstrap لبناء الوثائق الخاصة بنا، تجميع شفرة المصدر، تشغيل الاختبارات، والمزيد.

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

يستخدم Bootstrap npm scripts لنظام البناء الخاص به. يشمل package.json الخاص بنا طرقًا ملائمة للعمل مع الإطار، تشمل شفرة التجميع، تشغيل الاختبارات، والمزيد.

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

  1. تحميل وتثبيت Node.js، التي نستخدمها لإدارة تبعيات الخاصة بنا.
  2. إما تنزيل مصادر Bootstrap او شوكة تخزين Bootstrap.
  3. انتقل إلى الدليل جذر /bootstrap وتشغيل npm install لتثبيت التبعيات الخاص بنا المحلية المدرجة في package.json.

عندما يكتمل، ستتمكن من تشغيل مختلف الأوامر المقدمة من سطر الأوامر.

استخدام npm scripts

يشمل package.json الخاص بنا العديد من المهام لتطوير المشروع. تشغيل npm run لرؤية جميع npm scripts في terminal الخاص بك. تشمل المهام الأساسية ما يلي:

مهمة وصف
npm start يجمع CSS وJavaScript، يبني الوثائق، ويبدأ خادمًا محليًا.
npm run dist ينشئ dist/ الدليل مع الملفات المجمعة. يتطلب Sass، Autoprefixer، وterser.
npm test يجري الاختبارات محليًا بعد تشغيل npm run dist
npm run docs-serve يبني ويجري الوثائق محليًا.
البدء مع Bootstrap عبر npm مع مشروع البداية الخاص بنا! توجه إلى مستودع النموذج twbs/bootstrap-npm-starter لرؤية كيفية بناء وتخصيص Bootstrap في مشروع npm الخاص بك. يشمل Sass مجمع، Autoprefixer، Stylelint، PurgeCSS، وأيقونات Bootstrap.

Sass

يستخدم Bootstrap Dart Sass لتجميع ملفات مصدر Sass الخاصة بنا في ملفات CSS (يشمل في عملية البناء الخاصة بنا)، ونوصيك بفعل الشيء نفسه إذا كنت تقوم بتجميع Sass باستخدام خط أنابيب الأصول الخاص بك. استخدمنا سابقًا Node Sass لـ Bootstrap v4، لكن LibSass والحزم المبنية فوقه، بما في ذلك Node Sass، أصبحت مهملة الآن.

يستخدم Dart Sass دقة تقريب تبلغ 10 ولأسباب تتعلق بالكفاءة لا يسمح بتعديل هذه القيمة. نحن لا نخفض هذه الدقة أثناء المعالجة الإضافية لـ CSS الذي تم إنشاؤه لدينا، مثل أثناء التصغير، ولكن إذا اخترت القيام بذلك فإننا نوصي بالحفاظ على دقة لا تقل عن 6 لمنع حدوث مشكلات في تقريب المستعرض.

Autoprefixer

يستخدم Bootstrap Autoprefixer (تشمل في عملية البناء الخاصة بنا) لإضافة بادئات البائع تلقائيًا إلى بعض خصائص CSS في وقت البناء. يؤدي القيام بذلك إلى يوفر علينا الوقت والشفرة من خلال السماح لنا بكتابة الأجزاء الرئيسية من CSS الخاص بنا مرة واحدة مع التخلص من الحاجة إلى مزج البائعين مثل تلك الموجودة في الإصدار 3.

نحتفظ بقائمة المتصفحات المدعومة من خلال Autoprefixer في ملف منفصل داخل مستودع GitHub الخاص بنا. انظر .browserslistrc للحصول على التفاصيل.

RTLCSS

يستخدم Bootstrap RTLCSS لمعالجة CSS المجمعة وتحويلها إلى RTL - في الأساس استبدال الخصائص المدركة للاتجاه الأفقي (على سبيل المثال، padding-left) مع عكسها. يسمح لنا فقط بكتابة CSS الخاصة بنا مرة واحدة وإجراء تعديلات طفيفة باستخدام توجيهات التحكم والقيمة RTLCSS.

الوثائق المحلية

Running our documentation locally requires the use of Hugo, which gets installed via the hugo-bin npm package. Hugo is a blazingly fast and quite extensible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here’s how to get it started:

  1. Run through the tooling setup above to install all dependencies.
  2. From the root /bootstrap directory, run npm run docs-serve in the command line.
  3. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Troubleshooting

Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun npm install.