رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

ابزار بسازید

بیاموزید که چگونه از اسکریپت های npm موجود در Bootstrap برای ساخت اسناد، کامپایل کد منبع، اجرای تست ها و موارد دیگر استفاده کنید.

در این صفحه

راه اندازی ابزار

بوت استرپ از اسکریپت های npm برای سیستم ساخت خود استفاده می کند. package.json ما شامل روش‌های مناسب برای کار با چارچوب است، از جمله کامپایل کد، اجرای آزمایش‌ها و موارد دیگر.

برای استفاده از سیستم ساخت ما و اجرای مستندات ما به صورت محلی، به یک کپی از فایل های منبع بوت استرپ و Node نیاز دارید. این مراحل را دنبال کنید و باید آماده باشید:

  1. Node.js را دانلود و نصب کنید که از آن برای مدیریت وابستگی های خود استفاده می کنیم.
  2. منابع Bootstrap را دانلود کنید یا مخزن Bootstrap را فورک کنید .
  3. /bootstrapبه دایرکتوری ریشه بروید و npm installبرای نصب وابستگی‌های محلی فهرست شده در package.json اجرا کنید .

پس از تکمیل، می توانید دستورات مختلف ارائه شده از خط فرمان را اجرا کنید.

استفاده از اسکریپت های npm

package.json ما شامل وظایف متعددی برای توسعه پروژه است. npm runبرای دیدن همه اسکریپت های npm در ترمینال خود اجرا کنید. وظایف اولیه عبارتند از:

وظیفه شرح
npm start CSS و جاوا اسکریپت را کامپایل می کند، مستندات را می سازد و یک سرور محلی راه اندازی می کند.
npm run dist dist/دایرکتوری را با فایل های کامپایل شده ایجاد می کند. به Sass , Autoprefixer و terser نیاز دارد .
npm test بعد از اجرا تست ها را به صورت محلی اجرا می کندnpm run dist
npm run docs-serve اسناد را به صورت محلی می سازد و اجرا می کند.
با پروژه شروع ما با بوت استرپ از طریق npm شروع کنید! به مخزن قالب twbs/bootstrap-npm-starter بروید تا نحوه ساخت و سفارشی کردن Bootstrap را در پروژه npm خودتان ببینید. شامل کامپایلر Sass، Autoprefixer، Stylelint، PurgeCSS، و نمادهای Bootstrap است.

ساس

Bootstrap از Dart Sass برای کامپایل کردن فایل های منبع Sass ما در فایل های CSS (که در فرآیند ساخت ما گنجانده شده است) استفاده می کند، و اگر Sass را با استفاده از خط لوله دارایی خود کامپایل می کنید، توصیه می کنیم همین کار را انجام دهید. ما قبلا از Node Sass برای Bootstrap v4 استفاده می کردیم، اما LibSass و بسته های ساخته شده روی آن، از جمله Node Sass، اکنون منسوخ شده اند.

Dart Sass از دقت گرد کردن 10 استفاده می کند و به دلایل کارایی اجازه تنظیم این مقدار را نمی دهد. ما این دقت را در طول پردازش بیشتر CSS تولید شده خود، مانند هنگام کوچک‌سازی، کاهش نمی‌دهیم، اما اگر این کار را انتخاب کردید، توصیه می‌کنیم دقت حداقل 6 را برای جلوگیری از مشکلات گرد کردن مرورگر حفظ کنید.

پیشوند خودکار

بوت استرپ از Autoprefixer (که در فرآیند ساخت ما گنجانده شده است) استفاده می کند تا به طور خودکار پیشوندهای فروشنده را به برخی از ویژگی های CSS در زمان ساخت اضافه کند. انجام این کار باعث صرفه‌جویی در زمان و کد می‌شود و به ما امکان می‌دهد بخش‌های کلیدی CSS خود را یکبار بنویسیم و در عین حال نیاز به میکس‌های فروشنده مانند موارد موجود در نسخه 3 را از بین ببریم.

ما لیست مرورگرهای پشتیبانی شده از طریق Autoprefixer را در یک فایل جداگانه در مخزن GitHub خود نگهداری می کنیم. برای جزئیات به .browserslistrc مراجعه کنید.

RTLCSS

بوت استرپ از RTLCSS برای پردازش CSS کامپایل شده و تبدیل آنها به RTL استفاده می کند - که اساساً ویژگی های آگاه از جهت افقی (مثلاً padding-left) را با مخالف خود جایگزین می کند. این به ما اجازه می دهد فقط یک بار CSS خود را بنویسیم و با استفاده از دستورات کنترل RTLCSS و مقدار تغییرات جزئی انجام دهیم .

اسناد محلی

اجرای اسناد ما به صورت محلی نیاز به استفاده از Hugo دارد که از طریق بسته hugo-bin npm نصب می شود. Hugo یک مولد سایت استاتیک فوق العاده سریع و کاملاً قابل توسعه است که شامل موارد اولیه، فایل های مبتنی بر Markdown، قالب ها و موارد دیگر را در اختیار ما قرار می دهد. در اینجا نحوه شروع آن آمده است:

  1. برای نصب تمام وابستگی ها ، تنظیمات ابزار بالا را اجرا کنید.
  2. /bootstrapاز دایرکتوری ریشه ، npm run docs-serveدر خط فرمان اجرا کنید.
  3. http://localhost:9001/در مرورگر خود باز کنید و voilà.

با مطالعه مستندات آن درباره استفاده از هوگو بیشتر بیاموزید .

عیب یابی

اگر در نصب وابستگی ها با مشکل مواجه شدید، تمام نسخه های وابستگی قبلی (جهانی و محلی) را حذف نصب کنید. سپس، دوباره npm installاجرا کنید.