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 sluit gerieflike metodes in om met die raamwerk te werk, insluitend die samestelling van kode, lopende 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
/bootstrapen hardloopnpm installom 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 talle take vir die ontwikkeling van die projek. Hardloop npm runom al die npm-skrifte in jou terminale te sien. Primêre take sluit in:
| Taak | Beskrywing |
|---|---|
npm start |
Stel CSS en JavaScript saam, bou die dokumentasie en begin 'n plaaslike bediener. |
npm run dist |
Skep die dist/gids met saamgestelde lêers. Vereis Sass , Autoprefixer en terser . |
npm test |
Voer toetse plaaslik uit na hardloopnpm run dist |
npm run docs-serve |
Bou en voer die dokumentasie plaaslik uit. |
Sass
Bootstrap gebruik Dart Sass om ons Sass-bronlêers in CSS-lêers saam te stel (ingesluit by ons bouproses), en ons beveel aan dat jy dieselfde doen as jy Sass saamstel deur jou eie bate-pyplyn te gebruik. Ons het voorheen Node Sass vir Bootstrap v4 gebruik, maar LibSass en pakkette wat bo-op dit gebou is, insluitend Node Sass, word nou afgekeur .
Dart Sass gebruik 'n afrondingspresisie van 10 en laat om doeltreffendheidsredes nie aanpassing van hierdie waarde toe nie. Ons verlaag nie hierdie akkuraatheid tydens verdere verwerking van ons gegenereerde CSS, soos tydens verkleinering nie, maar as jy verkies om dit te doen, beveel ons aan om 'n akkuraatheid van ten minste 6 te handhaaf om probleme met blaaierafronding te voorkom.
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.
RTLCSS
Bootstrap gebruik RTLCSS om saamgestelde CSS te verwerk en om te skakel na RTL – basies vervang horisontale rigting-bewuste eienskappe (bv. padding-left) met hul teenoorgestelde. Dit laat ons net 'n enkele keer ons CSS skryf en klein aanpassings maak deur RTLCSS -beheer- en waarde- aanwysings te gebruik.
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 aan die gang te kry:
- Gaan deur die gereedskapopstelling hierbo om alle afhanklikhede te installeer.
- Uit die wortelgids
/bootstrap, hardloopnpm run docs-servein 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.