Orodja za gradnjo

Naučite se uporabljati Bootstrapove vključene skripte npm za izdelavo naše dokumentacije, prevajanje izvorne kode, izvajanje testov in več.

Na tej strani

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 /bootstrapimenika in zaženite npm 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 runin 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 lokalno`npm run dist`
`npm run docs-serve`	Gradi in izvaja dokumentacijo lokalno.

Začnite uporabljati Bootstrap prek npm z našim začetnim projektom! Pojdite v repozitorij predlog twbs/bootstrap-npm-starter in si oglejte, kako zgraditi in prilagoditi Bootstrap v svojem projektu npm. Vključuje prevajalnik Sass, Autoprefixer, Stylelint, PurgeCSS in ikone Bootstrap.

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 /bootstrapimenika zaženite npm run docs-serveukazno 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.