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 naslednje ukaze in opravila:
Naloga | Opis |
---|---|
npm run dist |
npm run dist ustvari /dist/ imenik s prevedenimi datotekami. Uporablja Sass , Autoprefixer in terser . |
npm test |
Po zagonu izvaja teste lokalnonpm run dist |
npm run docs-serve |
Gradi in izvaja dokumentacijo lokalno. |
Zaženite npm run
, da vidite vse skripte npm.
Sass
Bootstrap v4 uporablja Node Sass za prevajanje naših izvornih datotek Sass v datoteke CSS (vključene v naš postopek gradnje). Če želite pri prevajanju Sass z lastnim cevovodom sredstev na koncu imeti enak ustvarjen CSS, boste morali uporabiti prevajalnik Sass, ki podpira vsaj funkcije, ki jih ima Node Sass. To je pomembno upoštevati, ker so od 26. oktobra 2020 LibSass in paketi, zgrajeni na njem – vključno z Node Sass – zastareli .
Če potrebujete novejše funkcije Sass ali združljivost z novejšimi standardi CSS, je Dart Sass zdaj primarna izvedba Sass in podpira JavaScript API, ki je popolnoma združljiv z Node Sass (z nekaj izjemami, navedenimi na GitHub strani Dart Sass ).
Povečamo natančnost zaokroževanja Sass na 6 (privzeto je 5 v vozlišču Sass), da preprečimo težave z zaokroževanjem brskalnika. Če uporabljate Dart Sass, tega ne boste morali prilagajati, saj ta prevajalnik uporablja natančnost zaokroževanja 10 in zaradi učinkovitosti ne dovoljuje prilagoditve.
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 .
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
.