ابزار بسازید
بیاموزید که چگونه از اسکریپت های npm موجود در Bootstrap برای ساخت اسناد، کامپایل کد منبع، اجرای تست ها و موارد دیگر استفاده کنید.
راه اندازی ابزار
بوت استرپ از اسکریپت های npm برای سیستم ساخت خود استفاده می کند. package.json ما شامل روشهای مناسب برای کار با چارچوب است، از جمله کامپایل کد، اجرای آزمایشها و موارد دیگر.
برای استفاده از سیستم ساخت ما و اجرای مستندات ما به صورت محلی، به یک کپی از فایل های منبع بوت استرپ و Node نیاز دارید. این مراحل را دنبال کنید و باید آماده باشید:
- Node.js را دانلود و نصب کنید که از آن برای مدیریت وابستگی های خود استفاده می کنیم.
- منابع Bootstrap را دانلود کنید یا مخزن Bootstrap را فورک کنید .
/bootstrap
به دایرکتوری ریشه بروید وnpm install
برای نصب وابستگیهای محلی فهرست شده در package.json اجرا کنید .
پس از تکمیل، می توانید دستورات مختلف ارائه شده از خط فرمان را اجرا کنید.
استفاده از اسکریپت های npm
package.json ما شامل دستورات و وظایف زیر است:
وظیفه | شرح |
---|---|
npm run dist |
npm run dist /dist/ دایرکتوری را با فایل های کامپایل شده ایجاد می کند . از Sass , Autoprefixer , و terser استفاده می کند. |
npm test |
بعد از اجرا تست ها را به صورت محلی اجرا می کندnpm run dist |
npm run docs-serve |
اسناد را به صورت محلی می سازد و اجرا می کند. |
npm run
برای دیدن همه اسکریپت های npm اجرا کنید.
ساس
Bootstrap v4 از Node Sass برای کامپایل کردن فایل های منبع Sass ما در فایل های CSS (که در فرآیند ساخت ما گنجانده شده است) استفاده می کند. برای اینکه در هنگام کامپایل Sass با استفاده از خط لوله دارایی خود به همان CSS تولید شده برسید، باید از یک کامپایلر Sass استفاده کنید که حداقل ویژگی هایی را که Node Sass انجام می دهد پشتیبانی می کند. توجه به این نکته مهم است زیرا از 26 اکتبر 2020، LibSass و بستههای ساخته شده روی آن - از جمله Node Sass - منسوخ شدهاند .
اگر به ویژگیهای جدیدتر Sass یا سازگاری با استانداردهای جدیدتر CSS نیاز دارید، Dart Sass اکنون پیادهسازی اولیه Sass است و از یک API جاوا اسکریپت پشتیبانی میکند که کاملاً با Node Sass سازگار است (به استثنای چند مورد که در صفحه GitHub Dart Sass ذکر شده است ).
برای جلوگیری از مشکلات گرد کردن مرورگر، دقت گرد کردن Sass را به 6 افزایش می دهیم (به طور پیش فرض، در Node Sass 5 است). اگر از Dart Sass استفاده می کنید، این چیزی نیست که نیاز به تنظیم داشته باشید، زیرا آن کامپایلر از دقت گرد کردن 10 استفاده می کند و به دلایل کارایی اجازه تنظیم آن را نمی دهد.
پیشوند خودکار
بوت استرپ از Autoprefixer (که در فرآیند ساخت ما گنجانده شده است) استفاده می کند تا به طور خودکار پیشوندهای فروشنده را به برخی از ویژگی های CSS در زمان ساخت اضافه کند. انجام این کار باعث صرفهجویی در زمان و کد میشود و به ما امکان میدهد بخشهای کلیدی CSS خود را یکبار بنویسیم و در عین حال نیاز به میکسهای فروشنده مانند موارد موجود در نسخه 3 را از بین ببریم.
ما لیست مرورگرهای پشتیبانی شده از طریق Autoprefixer را در یک فایل جداگانه در مخزن GitHub خود نگهداری می کنیم. برای جزئیات به .browserslistrc مراجعه کنید.
اسناد محلی
اجرای اسناد ما به صورت محلی نیاز به استفاده از Hugo دارد که از طریق بسته hugo-bin npm نصب می شود. Hugo یک مولد سایت استاتیک فوق العاده سریع و کاملاً قابل توسعه است که شامل موارد اولیه، فایل های مبتنی بر Markdown، قالب ها و موارد دیگر را در اختیار ما قرار می دهد. در اینجا نحوه شروع آن آمده است:
- برای نصب تمام وابستگی ها ، تنظیمات ابزار بالا را اجرا کنید.
/bootstrap
از دایرکتوری ریشه ،npm run docs-serve
در خط فرمان اجرا کنید.http://localhost:9001/
در مرورگر خود باز کنید و voilà.
با مطالعه مستندات آن درباره استفاده از هوگو بیشتر بیاموزید .
عیب یابی
اگر در نصب وابستگی ها با مشکل مواجه شدید، تمام نسخه های وابستگی قبلی (جهانی و محلی) را حذف نصب کنید. سپس، دوباره npm install
اجرا کنید.