Alati za pravljenje
Naučite kako koristiti uključene npm skripte Bootstrapa za izradu naše dokumentacije, kompajliranje izvornog koda, pokretanje testova i još mnogo toga.
Postavljanje alata
Bootstrap koristi npm skripte za svoj sistem izgradnje. Naš package.json uključuje zgodne metode za rad sa okvirom, uključujući kompajliranje koda, pokretanje testova i još mnogo toga.
Da biste koristili naš sistem izgradnje i lokalno pokrenuli našu dokumentaciju, trebat će vam kopija izvornih datoteka Bootstrapa i Node. 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 fork Bootstrapovo spremište .
- Idite do korijenskog
/bootstrap
direktorija i pokrenitenpm install
da instalirate naše lokalne ovisnosti navedene u package.json .
Kada završite, moći ćete da pokrenete različite komande koje ste dobili iz komandne linije.
Korištenje npm skripti
Naš package.json uključuje brojne zadatke za razvoj projekta. Pokrenite npm run
da vidite sve npm skripte u vašem terminalu. Primarni zadaci uključuju:
Zadatak | Opis |
---|---|
npm start |
Kompajlira CSS i JavaScript, pravi dokumentaciju i pokreće lokalni server. |
npm run dist |
Kreira dist/ direktorij s kompajliranim 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), i preporučujemo da učinite isto ako kompajlirate Sass koristeći svoj vlastiti cjevovod sredstava. Ranije 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 iz razloga efikasnosti ne dozvoljava podešavanje ove vrijednosti. Ne smanjujemo ovu preciznost tokom dalje obrade našeg generisanog CSS-a, kao što je tokom minifikacije, ali ako to odaberete, preporučujemo da zadržite preciznost od najmanje 6 kako biste sprečili probleme sa zaokruživanjem pretraživača.
Autoprefixer
Bootstrap koristi Autoprefixer (uključen u naš proces izgradnje) za automatsko dodavanje prefiksa dobavljača nekim CSS svojstvima u vrijeme izrade. Na taj način štedimo vrijeme i kod, omogućavajući nam da napišemo ključne dijelove našeg CSS-a samo jednom, dok eliminiramo potrebu za miksinama dobavljača poput onih u v3.
Mi održavamo listu pretraživača podržanih kroz Autoprefixer u zasebnoj datoteci unutar našeg GitHub repozitorija. Pogledajte .browserslistrc za detalje.
RTLCSS
Bootstrap koristi RTLCSS za obradu kompajliranih CSS-a i pretvaranje ih u RTL – u osnovi zamjenjujući svojstva svjesne horizontalnog smjera (npr. padding-left
) njihovim suprotnim. Omogućava nam da napišemo naš CSS samo jedanput i napravimo manja podešavanja koristeći RTLCSS kontrolne i vrijednosne direktive.
Lokalna dokumentacija
Lokalno pokretanje naše dokumentacije zahtijeva korištenje Hugoa, koji se instalira preko paketa hugo-bin npm. Hugo je nevjerovatno brz i prilično proširiv generator statičkih stranica koji nam pruža: osnovne uključene, datoteke zasnovane na Markdownu, šablone i još mnogo toga. Evo kako započeti:
- Prođite kroz postavke alata iznad da biste instalirali sve ovisnosti.
- Iz korijenskog
/bootstrap
direktorija pokrenitenpm run docs-serve
u komandnoj liniji. - Otvorite
http://localhost:9001/
u svom pretraživaču i voilà.
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
.