Инструменти за изграждане
Научете как да използвате включените npm скриптове на Bootstrap, за да създадете нашата документация, да компилирате изходния код, да изпълнявате тестове и др.
Настройка на инструментите
Bootstrap използва npm скриптове за своята система за изграждане. Нашият package.json включва удобни методи за работа с рамката, включително компилиране на код, изпълнение на тестове и др.
За да използвате нашата система за изграждане и да стартирате нашата документация локално, ще ви трябва копие на изходните файлове на Bootstrap и 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 файлове (включени в нашия процес на изграждане). За да се окажете със същия генериран CSS, когато компилирате Sass, като използвате вашия собствен канал за активи, ще трябва да използвате Sass компилатор, който поддържа поне функциите, които Node Sass прави. Това е важно да се отбележи, тъй като от 26 октомври 2020 г. LibSass и пакетите, изградени върху него – включително Node Sass – са отхвърлени .
Ако се нуждаете от по-нови функции на Sass или съвместимост с по-новите CSS стандарти, Dart Sass вече е основната реализация на Sass и поддържа JavaScript API, който е напълно съвместим с Node Sass (с няколко изключения, изброени на страницата GitHub на Dart Sass ).
Увеличаваме точността на закръгляване на Sass до 6 (по подразбиране е 5 в Node Sass), за да предотвратим проблеми със закръгляването на браузъра. Ако използвате Dart Sass, това няма да е нещо, което трябва да коригирате, тъй като този компилатор използва точност на закръгляване от 10 и от съображения за ефективност не позволява да се коригира.
Автопрефикс
Bootstrap използва Autoprefixer (включен в нашия процес на изграждане), за да добавя автоматично префикси на доставчик към някои CSS свойства по време на изграждане. Това ни спестява време и код, като ни позволява да напишем ключови части от нашия CSS един път, като същевременно елиминира необходимостта от миксини на доставчици като тези, намерени във v3.
Поддържаме списъка с браузъри, поддържани чрез Autoprefixer, в отделен файл в нашето хранилище на GitHub. Вижте .browserslistrc за подробности.
Местна документация
Изпълнението на нашата документация локално изисква използването на Hugo, който се инсталира чрез пакета hugo-bin npm. Hugo е светкавично бърз и доста разширим генератор на статични сайтове, който ни предоставя: основни включвания, базирани на Markdown файлове, шаблони и др. Ето как да започнете:
- Преминете през настройката на инструментите по-горе, за да инсталирате всички зависимости.
- От главната
/bootstrap
директория стартирайтеnpm run docs-serve
в командния ред. - Отворете
http://localhost:9001/
в браузъра си и готово.
Научете повече за използването на Hugo, като прочетете неговата документация .
Отстраняване на неизправности
Ако срещнете проблеми с инсталирането на зависимости, деинсталирайте всички предишни версии на зависимости (глобални и локални). След това изпълнете отново npm install
.