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 brojne zadatke za razvoj projekta. Pokrenite npm run
da biste vidjeli sve npm skripte na svom terminalu. Primarni zadaci uključuju:
Zadatak | Opis |
---|---|
npm start |
Kompajlira CSS i JavaScript, izrađuje dokumentaciju i pokreće lokalni poslužitelj. |
npm run dist |
Stvara dist/ direktorij s kompiliranim datotekama. Zahtijeva Sass , Autoprefixer i terser . |
npm test |
Pokreće testove lokalno nakon pokretanjanpm run dist |
npm run docs-serve |
Gradi i pokreće dokumentaciju lokalno. |
Sass
Bootstrap koristi Dart Sass za kompajliranje naših Sass izvornih datoteka u CSS datoteke (uključene u naš proces izgradnje), a preporučujemo da učinite isto ako kompajlirate Sass pomoću vlastitog cjevovoda sredstava. Prethodno smo koristili Node Sass za Bootstrap v4, ali LibSass i paketi izgrađeni na njemu, uključujući Node Sass, sada su zastarjeli .
Dart Sass koristi preciznost zaokruživanja od 10 i zbog učinkovitosti ne dopušta podešavanje ove vrijednosti. Ne smanjujemo ovu preciznost tijekom daljnje obrade našeg generiranog CSS-a, kao što je tijekom smanjivanja, ali ako to odaberete, preporučujemo održavanje preciznosti od najmanje 6 kako biste spriječili probleme sa zaokruživanjem preglednika.
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.
RTLCSS
Bootstrap koristi RTLCSS za obradu kompajliranog CSS-a i pretvaranje u RTL – u osnovi zamjenjujući svojstva svjesna horizontalnog smjera (npr. padding-left
) s njihovom suprotnošću. Omogućuje nam samo jednokratno pisanje CSS-a i manja podešavanja pomoću RTLCSS kontrolnih i vrijednosnih direktiva.
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
.