Bou gereedskap
Leer hoe om Bootstrap se ingeslote npm-skrifte te gebruik om ons dokumentasie te bou, bronkode saam te stel, toetse uit te voer, en meer.
Gereedskap opstelling
Bootstrap gebruik npm-skrifte vir sy boustelsel. Ons package.json bevat gerieflike metodes om met die raamwerk te werk, insluitend die samestelling van kode, die uitvoer van toetse, en meer.
Om ons boustelsel te gebruik en ons dokumentasie plaaslik te laat loop, het jy 'n kopie van Bootstrap se bronlêers en Node nodig. Volg hierdie stappe en jy moet gereed wees om te rock:
- Laai af en installeer Node.js , wat ons gebruik om ons afhanklikhede te bestuur.
- Laai óf Bootstrap se bronne af óf vurk Bootstrap se repository af .
- Navigeer na die wortelgids
/bootstrap
en hardloopnpm install
om ons plaaslike afhanklikhede wat in package.json gelys is, te installeer .
Wanneer dit voltooi is, sal jy die verskillende opdragte wat vanaf die opdragreël verskaf word, kan uitvoer.
Gebruik npm skrifte
Ons package.json bevat die volgende opdragte en take:
Taak | Beskrywing |
---|---|
npm run dist |
npm run dist skep die /dist/ gids met saamgestelde lêers. Gebruik Sass , Autoprefixer en terser . |
npm test |
Voer toetse plaaslik uit na hardloopnpm run dist |
npm run docs-serve |
Bou en bestuur die dokumentasie plaaslik. |
Hardloop npm run
om al die npm-skrifte te sien.
Sass
Bootstrap v4 gebruik Node Sass om ons Sass-bronlêers in CSS-lêers saam te stel (ingesluit by ons bouproses). Om met dieselfde gegenereerde CSS te eindig wanneer jy Sass met jou eie bate-pyplyn saamstel, sal jy 'n Sass-samesteller moet gebruik wat ten minste die kenmerke ondersteun wat Node Sass doen. Dit is belangrik om daarop te let, want vanaf 26 Oktober 2020 word LibSass en pakkette wat bo-op dit gebou is—insluitend Node Sass— uitgestel .
As jy nuwer Sass-kenmerke of versoenbaarheid met nuwer CSS-standaarde benodig, is Dart Sass nou die primêre implementering van Sass en ondersteun 'n JavaScript API wat ten volle versoenbaar is met Node Sass (met 'n paar uitsonderings wat op Dart Sass se GitHub-bladsy gelys is ).
Ons verhoog die Sass-afrondingspresisie tot 6 (by verstek is dit 5 in Node Sass) om probleme met blaaierafronding te voorkom. As jy Dart Sass gebruik, sal dit nie iets wees wat jy hoef aan te pas nie, aangesien daardie samesteller 'n afrondingspresisie van 10 gebruik en om doeltreffendheidsredes nie toelaat dat dit aangepas word nie.
Autoprefixer
Bootstrap gebruik Autoprefixer (ingesluit by ons bouproses) om verskaffervoorvoegsels outomaties by sommige CSS-eienskappe by te voeg tydens boutyd. Deur dit te doen, bespaar ons tyd en kode deur ons in staat te stel om sleuteldele van ons CSS 'n enkele keer te skryf, terwyl die behoefte aan verskaffermengsels soos dié wat in v3 gevind word, uitskakel.
Ons hou die lys blaaiers wat deur Autoprefixer ondersteun word in 'n aparte lêer binne ons GitHub-bewaarplek. Sien .browserslistrc vir besonderhede.
Plaaslike dokumentasie
Om ons dokumentasie plaaslik te laat loop, vereis die gebruik van Hugo, wat via die hugo-bin npm-pakket geïnstalleer word. Hugo is 'n blitsvinnige en redelik uitbreidbare statiese werfgenerator wat ons voorsien: basiese insluit, Markdown-gebaseerde lêers, sjablone en meer. Hier is hoe om dit te begin:
- Gaan deur die gereedskapopstelling hierbo om alle afhanklikhede te installeer.
- Uit die wortelgids
/bootstrap
, hardloopnpm run docs-serve
in die opdragreël. - Maak oop
http://localhost:9001/
in jou blaaier, en voilà.
Kom meer te wete oor die gebruik van Hugo deur die dokumentasie daarvan te lees .
Probleemoplossing
As jy probleme ondervind met die installering van afhanklikhede, verwyder alle vorige afhanklikheidsweergawes (wêreldwyd en plaaslik). Dan, herlaai npm install
.