in English

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:

  1. Laai af en installeer Node.js , wat ons gebruik om ons afhanklikhede te bestuur.
  2. Laai óf Bootstrap se bronne af óf vurk Bootstrap se repository af .
  3. Navigeer na die wortelgids /bootstrapen hardloop npm 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 die volgende opdragte en take:

Taak Beskrywing
npm run dist npm run distskep 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 runom al die npm-skrifte te sien.

Begin met Bootstrap via npm met ons beginnersprojek! Gaan na die twbs/bootstrap-npm-starter- sjabloonbewaarplek om te sien hoe om Bootstrap in u eie npm-projek te bou en aan te pas. Sluit Sass-samesteller, Autoprefixer, Stylelint, PurgeCSS en Bootstrap-ikone in.

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:

  1. Gaan deur die gereedskapopstelling hierbo om alle afhanklikhede te installeer.
  2. Uit die wortelgids /bootstrap, hardloop npm run docs-servein die opdragreël.
  3. 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.