in English

Zostavte nástroje

Zistite, ako používať skripty npm zahrnuté v Bootstrap na zostavenie našej dokumentácie, kompiláciu zdrojového kódu, spustenie testov a ďalšie.

Na tejto stránke

Nastavenie nástrojov

Bootstrap používa pre svoj zostavovací systém skripty npm . Náš súbor package.json obsahuje pohodlné metódy na prácu s rámcom vrátane kompilácie kódu, spúšťania testov a ďalších.

Ak chcete použiť náš systém zostavovania a spustiť našu dokumentáciu lokálne, budete potrebovať kópiu zdrojových súborov Bootstrapu a uzla. Postupujte podľa týchto krokov a mali by ste byť pripravení na rock:

Stiahnite si a nainštalujte Node.js , ktorý používame na správu našich závislostí.
Stiahnite si zdroje Bootstrapu alebo rozdeľte úložisko Bootstrapu .
Prejdite do koreňového /bootstrapadresára a spustite npm installinštaláciu našich miestnych závislostí uvedených v súbore package.json .

Po dokončení budete môcť spúšťať rôzne príkazy poskytnuté z príkazového riadku.

Použitie skriptov npm

Náš súbor package.json obsahuje množstvo úloh na vývoj projektu. Spustením npm runzobrazíte všetky skripty npm vo vašom termináli. Medzi hlavné úlohy patrí:

Úloha	Popis
`npm start`	Kompiluje CSS a JavaScript, vytvára dokumentáciu a spúšťa lokálny server.
`npm run dist`	Vytvorí `dist/`adresár s kompilovanými súbormi. Vyžaduje Sass , Autoprefixer a Terser .
`npm test`	Po spustení spustí testy lokálne`npm run dist`
`npm run docs-serve`	Vytvára a spúšťa dokumentáciu lokálne.

Začnite s Bootstrap cez npm s naším štartovacím projektom! Prejdite do úložiska šablón twbs/bootstrap-npm-starter a zistite, ako vytvoriť a prispôsobiť Bootstrap vo svojom vlastnom projekte npm. Obsahuje prekladač Sass, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

Sass

Bootstrap používa Dart Sass na kompiláciu našich zdrojových súborov Sass do súborov CSS (zahrnutých v našom procese zostavovania) a odporúčame vám urobiť to isté, ak kompilujete Sass pomocou vlastného kanála aktív. Predtým sme používali Node Sass pre Bootstrap v4, ale LibSass a nad ním postavené balíčky, vrátane Node Sass, sú teraz zastarané .

Dart Sass používa presnosť zaokrúhľovania 10 a z dôvodov efektívnosti neumožňuje úpravu tejto hodnoty. Túto presnosť neznižujeme počas ďalšieho spracovania nášho vygenerovaného CSS, ako je napríklad miniifikácia, ale ak sa tak rozhodnete, odporúčame zachovať presnosť aspoň 6, aby ste predišli problémom so zaokrúhľovaním prehliadača.

Autoprefixer

Bootstrap používa Autoprefixer (zahrnutý v našom procese zostavovania) na automatické pridávanie predpôn dodávateľa k niektorým vlastnostiam CSS v čase zostavovania. To nám šetrí čas a kód, pretože nám umožňuje písať kľúčové časti nášho CSS raz a zároveň eliminuje potrebu mixov dodávateľov, ako sú tie, ktoré sa nachádzajú vo verzii 3.

Zoznam prehliadačov podporovaných prostredníctvom funkcie Autoprefixer uchovávame v samostatnom súbore v rámci nášho úložiska GitHub. Podrobnosti nájdete v .browserslistrc .

RTLCSS

Bootstrap používa RTLCSS na spracovanie skompilovaných CSS a ich konverziu na RTL – v podstate nahrádza horizontálne smerové vlastnosti (napr. padding-left) ich opakom. Umožňuje nám to napísať naše CSS iba raz a vykonať menšie vylepšenia pomocou riadiacich a hodnotových direktív RTLCSS.

Miestna dokumentácia

Lokálne spustenie našej dokumentácie vyžaduje použitie Hugo, ktorý sa inštaluje prostredníctvom balíka hugo-bin npm. Hugo je neuveriteľne rýchly a pomerne rozšíriteľný generátor statických stránok, ktorý nám poskytuje: základné položky, súbory založené na Markdown, šablóny a ďalšie. Tu je návod, ako to začať:

Prejdite cez nastavenie nástrojov vyššie a nainštalujte všetky závislosti.
Z koreňového /bootstrapadresára spustite npm run docs-servev príkazovom riadku.
Otvorte http://localhost:9001/vo svojom prehliadači a voilà.

Viac informácií o používaní Huga nájdete v jeho dokumentácii .

Riešenie problémov

Ak narazíte na problémy s inštaláciou závislostí, odinštalujte všetky predchádzajúce verzie závislostí (globálne a lokálne). Potom znova spustite npm install.