in English

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:

  1. Prenesite in namestite Node.js , ki ga uporabljamo za upravljanje naših odvisnosti.
  2. Prenesite izvorne kode Bootstrapa ali razcepite repozitorij Bootstrapa .
  3. 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 naslednje ukaze in opravila:

Naloga Opis
npm run dist npm run distustvari /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.

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 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:

  1. Zaženite zgornjo nastavitev orodja , da namestite vse odvisnosti.
  2. Iz korenskega /bootstrapimenika zaženite npm run docs-serveukazno vrstico.
  3. 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.