in English

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:

  1. Preuzmite i instalirajte Node.js , koji koristimo za upravljanje našim ovisnostima.
  2. Ili preuzmite Bootstrapove izvore ili fork Bootstrapovo spremište .
  3. Idite do korijenskog /bootstrapdirektorija i pokrenite npm installda 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 sljedeće naredbe i zadatke:

Zadatak Opis
npm run dist npm run distkreira /dist/direktorij s kompajliranim 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 runda vidite sve npm skripte.

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

Sass

Bootstrap v4 koristi Node Sass za kompajliranje naših Sass izvornih datoteka u CSS datoteke (uključene u naš proces izgradnje). Da biste završili sa istim generiranim CSS-om prilikom kompajliranja Sass-a koristeći svoj vlastiti cjevovod sredstava, morat ćete koristiti Sass kompajler koji podržava barem funkcije koje Node Sass radi. Ovo je važno napomenuti jer su od 26. oktobra 2020. LibSass i paketi izgrađeni na njemu—uključujući Node Sass— zastarjeli .

Ako su vam potrebne novije Sass funkcije ili kompatibilnost sa novijim CSS standardima, Dart Sass je sada primarna implementacija Sass-a i podržava JavaScript API koji je potpuno kompatibilan sa Node Sass-om (uz nekoliko izuzetaka navedenih na GitHub stranici Dart Sass-a ).

Povećavamo preciznost zaokruživanja Sass-a na 6 (podrazumevano je 5 u Node Sass-u) da sprečimo probleme sa zaokruživanjem pretraživača. Ako koristite Dart Sass, ovo neće biti nešto što trebate prilagoditi, jer taj kompajler koristi preciznost zaokruživanja od 10 i iz razloga efikasnosti ne dozvoljava da se to prilagodi.

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.

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:

  1. Prođite kroz postavke alata iznad da biste instalirali sve ovisnosti.
  2. Iz korijenskog /bootstrapdirektorija pokrenite npm run docs-serveu komandnoj liniji.
  3. 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.