in English

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:

  1. Preuzmite i instalirajte Node.js , koji koristimo za upravljanje našim ovisnostima.
  2. Ili preuzmite Bootstrapove izvore ili račvajte Bootstrapov repozitorij .
  3. 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 sljedeće naredbe i zadatke:

Zadatak Opis
npm run dist npm run diststvara /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 runda biste vidjeli sve npm skripte.

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 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:

  1. Prođite kroz gornju postavku alata da biste instalirali sve ovisnosti.
  2. Iz korijenskog /bootstrapdirektorija pokrenite npm run docs-servenaredbeni redak.
  3. 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.