Ibni għodod
Tgħallem kif tuża l-iskripts npm inklużi ta' Bootstrap biex tibni d-dokumentazzjoni tagħna, tikkumpila l-kodiċi tas-sors, tmexxi testijiet, u aktar.
Setup tal-għodda
Bootstrap juża skripts npm għas-sistema tal-bini tiegħu. Il- pakkett.json tagħna jinkludi metodi konvenjenti biex taħdem mal-qafas, inkluż il-kompilazzjoni tal-kodiċi, it-tmexxija tat-testijiet, u aktar.
Biex tuża s-sistema tal-bini tagħna u tħaddem id-dokumentazzjoni tagħna lokalment, ikollok bżonn kopja tal-fajls sors u Node ta' Bootstrap. Segwi dawn il-passi u inti għandek tkun lest biex rock:
- Niżżel u installa Node.js , li nużaw biex niġġestixxu d-dipendenzi tagħna.
- Jew niżżel is-sorsi ta' Bootstrap jew irażżel ir-repożitorju ta' Bootstrap .
- Innaviga lejn id-direttorju tal-għeruq
/bootstrap
u mexxinpm install
biex tinstalla d-dipendenzi lokali tagħna elenkati f'package.json .
Meta titlesta, tkun tista' tmexxi d-diversi kmandi pprovduti mil-linja tal-kmand.
Bl-użu ta 'skripts npm
package.json tagħna jinkludi l-kmandi u l-kompiti li ġejjin:
Kompitu | Deskrizzjoni |
---|---|
npm run dist |
npm run dist joħloq id- /dist/ direttorju b'fajls ikkumpilati. Juża Sass , Autoprefixer , u terser . |
npm test |
Tmexxi testijiet lokalment wara li taħdemnpm run dist |
npm run docs-serve |
Jibni u jmexxi d-dokumentazzjoni lokalment. |
Mexxi npm run
biex tara l-iskripts kollha npm.
Sass
Bootstrap v4 juża Node Sass għall-kompilazzjoni tal-fajls tas-sors Sass tagħna f'fajls CSS (inklużi fil-proċess tal-bini tagħna). Sabiex tispiċċa bl-istess CSS iġġenerat meta tikkumpila Sass billi tuża l-pipeline tal-assi tiegħek stess, ikollok bżonn tuża kompilatur Sass li jappoġġa tal-inqas il-karatteristiċi li jagħmel Node Sass. Dan huwa importanti li wieħed jinnota għaliex mis-26 ta’ Ottubru 2020, LibSass u pakketti mibnija fuqu—inkluż Node Sass—huma deprecati .
Jekk teħtieġ karatteristiċi Sass aktar ġodda jew kompatibilità ma 'standards CSS aktar ġodda, Dart Sass issa huwa l-implimentazzjoni primarja ta' Sass u jappoġġja JavaScript API li hija kompletament kompatibbli ma 'Node Sass (bi ftit eċċezzjonijiet elenkati fuq il- paġna GitHub ta' Dart Sass ).
Aħna nżidu l-preċiżjoni tal-arrotondament tas-Sass għal 6 (b'mod awtomatiku, huwa 5 f'Node Sass) biex nipprevjenu problemi bl-arrotondament tal-browser. Jekk tuża Dart Sass din mhux se tkun xi ħaġa li għandek bżonn taġġusta, peress li dak il-kompilatur juża preċiżjoni tal-arrotondament ta '10 u għal raġunijiet ta' effiċjenza ma jippermettix li jiġi aġġustat.
Autoprefisser
Bootstrap juża Autoprefixer (inkluż fil-proċess tal-bini tagħna) biex iżid awtomatikament prefissi tal-bejjiegħ għal xi proprjetajiet CSS fil-ħin tal-bini. Jekk tagħmel hekk tiffranka ħin u kodiċi billi tippermettilna niktbu partijiet ewlenin tas-CSS tagħna darba waħda filwaqt li telimina l-ħtieġa għal mixins tal-bejjiegħ bħal dawk misjuba f'v3.
Aħna nżommu l-lista ta 'browsers appoġġjati permezz ta' Autoprefixer f'fajl separat fi ħdan ir-repożitorju GitHub tagħna. Ara .browserslistrc għad-dettalji.
Dokumentazzjoni lokali
It-tmexxija tad-dokumentazzjoni tagħna lokalment teħtieġ l-użu ta 'Hugo, li jiġi installat permezz tal- pakkett hugo-bin npm. Hugo huwa ġeneratur ta 'sit statiku blazingly veloċi u pjuttost estensibbli li jipprovdilna: jinkludi bażiku, fajls ibbażati fuq Markdown, mudelli, u aktar. Hawn kif tibda:
- Mexxi s- setup tal-għodda hawn fuq biex tinstalla d-dipendenzi kollha.
- Mid-
/bootstrap
direttorju tal-għeruq, mexxinpm run docs-serve
fil-linja tal-kmand. - Iftaħ
http://localhost:9001/
fil-browser tiegħek, u voilà.
Tgħallem aktar dwar l-użu ta' Hugo billi taqra d- dokumentazzjoni tiegħu .
Issolvi l-problemi
Jekk tiltaqa' ma' problemi bl-installazzjoni tad-dipendenzi, iddiżinstalla l-verżjonijiet tad-dipendenza preċedenti kollha (globali u lokali). Imbagħad, erġa' wettaq npm install
.