Orodja za gradnjo
Naučite se uporabljati Bootstrapove vključene skripte npm za izdelavo naše dokumentacije, prevajanje izvorne kode, izvajanje testov in več.
Nastavitev orodja
Bootstrap uporablja skripte npm za svoj gradbeni sistem. Naš package.json vključuje priročne metode za delo z ogrodjem, vključno s prevajanjem kode, izvajanjem testov in več.
Če želite uporabljati naš gradbeni sistem in lokalno izvajati našo dokumentacijo, potrebujete kopijo izvornih datotek in vozlišča Bootstrap. Sledite tem korakom in že boste pripravljeni na začetek:
- Prenesite in namestite Node.js , ki ga uporabljamo za upravljanje naših odvisnosti.
- Prenesite izvorne kode Bootstrapa ali razcepite repozitorij Bootstrapa .
- Pomaknite se do korenskega
/bootstrap
imenika in zaženitenpm install
, da namestite naše lokalne odvisnosti, navedene v package.json .
Ko končate, boste lahko izvajali različne ukaze iz ukazne vrstice.
Uporaba skriptov npm
Naš package.json vključuje številne naloge za razvoj projekta. Zaženite npm run
in si oglejte vse skripte npm v vašem terminalu. Primarne naloge vključujejo:
Naloga | Opis |
---|---|
npm start |
Prevaja CSS in JavaScript, gradi dokumentacijo in zažene lokalni strežnik. |
npm run dist |
Ustvari dist/ imenik s prevedenimi datotekami. Zahteva Sass , Autoprefixer in terser . |
npm test |
Po zagonu izvaja teste lokalnonpm run dist |
npm run docs-serve |
Gradi in izvaja dokumentacijo lokalno. |
Sass
Bootstrap uporablja Dart Sass za prevajanje naših izvornih datotek Sass v datoteke CSS (vključene v naš postopek gradnje) in priporočamo, da storite enako, če prevajate Sass z lastnim cevovodom sredstev. Prej smo uporabljali Node Sass za Bootstrap v4, vendar so LibSass in paketi, zgrajeni na njem, vključno z Node Sass, zdaj zastareli .
Dart Sass uporablja natančnost zaokroževanja 10 in zaradi učinkovitosti ne dovoljuje prilagajanja te vrednosti. Te natančnosti ne znižamo med nadaljnjo obdelavo našega ustvarjenega CSS, na primer med pomanjševanjem, vendar če se tako odločite, priporočamo, da ohranite natančnost vsaj 6, da preprečite težave z zaokroževanjem brskalnika.
Samodejna predpona
Bootstrap uporablja Autoprefixer (vključen v naš postopek gradnje) za samodejno dodajanje predpon prodajalca v nekatere lastnosti CSS v času gradnje. To nam prihrani čas in kodo, saj nam omogoča, da ključne dele našega CSS napišemo enkrat, hkrati pa odpravimo potrebo po miksinih prodajalcev, kot so tisti v v3.
Seznam brskalnikov, ki jih podpira Autoprefixer, hranimo v ločeni datoteki v našem repozitoriju GitHub. Za podrobnosti glejte .browserslistrc .
RTLCSS
Bootstrap uporablja RTLCSS za obdelavo prevedenih CSS in njihovo pretvorbo v RTL – v bistvu zamenja lastnosti, ki poznajo vodoravno smer (npr. padding-left
) z njihovim nasprotjem. Omogoča nam, da svoj CSS napišemo le enkrat in naredimo manjše popravke z uporabo krmilnih in vrednostnih direktiv RTLCSS .
Lokalna dokumentacija
Lokalno izvajanje naše dokumentacije zahteva uporabo Huga, ki se namesti prek paketa hugo-bin npm. Hugo je izjemno hiter in precej razširljiv generator statičnih spletnih mest, ki nam ponuja: osnovne vključitve, datoteke, ki temeljijo na Markdownu, predloge in še več. Tukaj je opisano, kako začeti:
- Zaženite zgornjo nastavitev orodja , da namestite vse odvisnosti.
- Iz korenskega
/bootstrap
imenika zaženitenpm run docs-serve
ukazno vrstico. - Odprite
http://localhost:9001/
v brskalniku in voilà.
Izvedite več o uporabi Huga tako, da preberete njegovo dokumentacijo .
Odpravljanje težav
Če naletite na težave pri namestitvi odvisnosti, odstranite vse prejšnje različice odvisnosti (globalne in lokalne). Nato znova zaženite npm install
.