Alati za gradnju
Naučite kako koristiti uključene Bootstrapove npm skripte za izradu naše dokumentacije, kompajliranje izvornog koda, izvođenje testova i više.
Postavljanje alata
Bootstrap koristi npm skripte za svoj sustav izgradnje. Naš package.json uključuje prikladne metode za rad s okvirom, uključujući kompajliranje koda, izvođenje testova i više.
Da biste koristili naš sustav izrade i lokalno pokrenuli našu dokumentaciju, trebat će vam kopija Bootstrapovih izvornih datoteka i čvora. Slijedite ove korake i trebali biste biti spremni za rock:
- Preuzmite i instalirajte Node.js , koji koristimo za upravljanje našim ovisnostima.
- Ili preuzmite Bootstrapove izvore ili račvajte Bootstrapov repozitorij .
- Dođite do korijenskog
/bootstrap
direktorija i pokrenitenpm install
da biste instalirali naše lokalne ovisnosti navedene u package.json .
Kada završite, moći ćete pokrenuti različite naredbe iz naredbenog retka.
Korištenje npm skripti
Naš package.json uključuje sljedeće naredbe i zadatke:
Zadatak | Opis |
---|---|
npm run dist |
npm run dist stvara /dist/ direktorij s kompiliranim datotekama. Koristi Sass , Autoprefixer i terser . |
npm test |
Pokreće testove lokalno nakon pokretanjanpm run dist |
npm run docs-serve |
Gradi i pokreće dokumentaciju lokalno. |
Pokrenite npm run
da biste vidjeli sve npm skripte.
Sass
Bootstrap v4 koristi Node Sass za kompajliranje naših Sass izvornih datoteka u CSS datoteke (uključene u naš proces izgradnje). Kako biste završili s istim generiranim CSS-om kada kompajlirate Sass pomoću vlastitog cjevovoda sredstava, morat ćete koristiti Sass prevodilac koji podržava barem značajke koje podržava Node Sass. Ovo je važno napomenuti jer su od 26. listopada 2020. LibSass i paketi izgrađeni na njemu—uključujući Node Sass— zastarjeli .
Ako su vam potrebne novije Sass značajke ili kompatibilnost s novijim CSS standardima, Dart Sass je sada primarna implementacija Sassa i podržava JavaScript API koji je u potpunosti kompatibilan s Node Sass (uz nekoliko iznimaka navedenih na Dart Sass GitHub stranici ).
Povećavamo preciznost Sass zaokruživanja na 6 (prema zadanim postavkama, to je 5 u Node Sass) kako bismo spriječili probleme sa zaokruživanjem preglednika. Ako koristite Dart Sass, to neće biti nešto što trebate prilagoditi, jer taj kompajler koristi preciznost zaokruživanja od 10 i zbog učinkovitosti ne dopušta podešavanje.
Automatski prefiks
Bootstrap koristi Autoprefixer (uključen u naš proces izrade) za automatsko dodavanje prefiksa dobavljača nekim CSS svojstvima u vrijeme izgradnje. Na taj način štedimo vrijeme i kod dopuštajući nam da napišemo ključne dijelove našeg CSS-a samo jednom, a istovremeno eliminiramo potrebu za mixinovima dobavljača poput onih koji se nalaze u v3.
Održavamo popis preglednika podržanih kroz Autoprefixer u zasebnoj datoteci unutar našeg GitHub repozitorija. Pogledajte .browserslistrc za detalje.
Lokalna dokumentacija
Lokalno pokretanje naše dokumentacije zahtijeva korištenje Huga, koji se instalira putem hugo-bin npm paketa. Hugo je nevjerojatno brz i prilično proširiv generator statičnih web stranica koji nam pruža: osnovne sadržaje, datoteke temeljene na Markdownu, predloške i još mnogo toga. Evo kako to započeti:
- Prođite kroz gornju postavku alata da biste instalirali sve ovisnosti.
- Iz korijenskog
/bootstrap
direktorija pokrenitenpm run docs-serve
naredbeni redak. - Otvorite
http://localhost:9001/
u pregledniku i evo.
Saznajte više o korištenju Huga čitajući njegovu dokumentaciju .
Rješavanje problema
Ako naiđete na probleme s instaliranjem ovisnosti, deinstalirajte sve prethodne verzije ovisnosti (globalne i lokalne). Zatim ponovite npm install
.