Bygg verktøy
Lær hvordan du bruker Bootstraps inkluderte npm-skript for å bygge vår dokumentasjon, kompilere kildekode, kjøre tester og mer.
Verktøyoppsett
Bootstrap bruker npm-skript for byggesystemet sitt. Vår package.json inkluderer praktiske metoder for å jobbe med rammeverket, inkludert kompilering av kode, kjøring av tester og mer.
For å bruke byggesystemet vårt og kjøre dokumentasjonen lokalt, trenger du en kopi av Bootstraps kildefiler og Node. Følg disse trinnene og du bør være klar til å rocke:
- Last ned og installer Node.js , som vi bruker til å administrere avhengighetene våre.
- Enten last ned Bootstraps kilder eller fordel Bootstraps depot .
- Naviger til rotkatalogen
/bootstrap
og kjørnpm install
for å installere våre lokale avhengigheter oppført i package.json .
Når du er ferdig, vil du kunne kjøre de forskjellige kommandoene fra kommandolinjen.
Bruker npm-skript
Vår package.json inneholder følgende kommandoer og oppgaver:
Oppgave | Beskrivelse |
---|---|
npm run dist |
npm run dist oppretter /dist/ katalogen med kompilerte filer. Bruker Sass , Autoprefixer og terser . |
npm test |
Kjører tester lokalt etter kjøringnpm run dist |
npm run docs-serve |
Bygger og kjører dokumentasjonen lokalt. |
Kjør npm run
for å se alle npm-skriptene.
Sass
Bootstrap v4 bruker Node Sass for å kompilere våre Sass-kildefiler til CSS-filer (inkludert i byggeprosessen vår). For å ende opp med den samme genererte CSS-en når du kompilerer Sass ved hjelp av din egen eiendelspipeline, må du bruke en Sass-kompilator som støtter minst funksjonene som Node Sass gjør. Dette er viktig å merke seg fordi fra og med 26. oktober 2020 er LibSass og pakker bygget på toppen av det – inkludert Node Sass – avviklet .
Hvis du trenger nyere Sass-funksjoner eller kompatibilitet med nyere CSS-standarder, er Dart Sass nå den primære implementeringen av Sass og støtter et JavaScript API som er fullt kompatibelt med Node Sass (med noen få unntak oppført på Dart Sass GitHub-side ).
Vi øker Sass-avrundingspresisjonen til 6 (som standard er den 5 i Node Sass) for å forhindre problemer med nettleseravrunding. Hvis du bruker Dart Sass vil ikke dette være noe du trenger å justere, siden den kompilatoren bruker en avrundingspresisjon på 10 og av effektivitetsgrunner ikke tillater at den justeres.
Autoprefikser
Bootstrap bruker Autoprefixer (inkludert i byggeprosessen vår) for automatisk å legge til leverandørprefikser til noen CSS-egenskaper ved byggetidspunktet. Å gjøre det sparer oss for tid og kode ved å la oss skrive viktige deler av CSS-en vår én gang, samtidig som vi eliminerer behovet for leverandørmikser som de som finnes i v3.
Vi opprettholder listen over nettlesere som støttes gjennom Autoprefixer i en egen fil i vårt GitHub-lager. Se .browserslistrc for detaljer.
Lokal dokumentasjon
Å kjøre dokumentasjonen lokalt krever bruk av Hugo, som installeres via hugo-bin npm-pakken. Hugo er en lynrask og ganske utvidbar statisk nettstedgenerator som gir oss: grunnleggende inkluderer, Markdown-baserte filer, maler og mer. Slik kommer du i gang:
- Kjør gjennom verktøyoppsettet ovenfor for å installere alle avhengigheter.
- Fra rotkatalogen
/bootstrap
, kjørnpm run docs-serve
på kommandolinjen. - Åpne
http://localhost:9001/
i nettleseren din, og voilà.
Lær mer om bruk av Hugo ved å lese dokumentasjonen .
Feilsøking
Skulle du støte på problemer med å installere avhengigheter, avinstaller alle tidligere avhengighetsversjoner (globale og lokale). Kjør deretter på nytt npm install
.