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.

Na ovoj stranici

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 /bootstrapdirektorija i pokrenite npm installda 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 runda 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 pokretanja`npm run dist`
`npm run docs-serve`	Gradi i pokreće dokumentaciju lokalno.

Započnite s Bootstrapom putem npm-a s našim početnim projektom! Idite na repozitorij predložaka twbs/bootstrap-npm-starter da vidite kako izgraditi i prilagoditi Bootstrap u vlastitom npm projektu. Uključuje Sass kompajler, Autoprefixer, Stylelint, PurgeCSS i Bootstrap ikone.

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 /bootstrapdirektorija pokrenite npm run docs-servenaredbeni 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.