Zostavte nástroje
Naučte sa používať skripty npm zahrnuté v Bootstrap na vytvorenie našej dokumentácie, kompiláciu zdrojového kódu, spustenie testov a ďalšie.
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
/bootstrap
adresára a spustitenpm install
inš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 nasledujúce príkazy a úlohy:
Úloha | Popis |
---|---|
npm run dist |
npm run dist vytvorí /dist/ adresár s kompilovanými súbormi. Používa Sass , Autoprefixer a Terser . |
npm test |
Po spustení spustí testy lokálnenpm run dist |
npm run docs-serve |
Vytvára a spúšťa dokumentáciu lokálne. |
Spustením npm run
zobrazíte všetky skripty npm.
Sass
Bootstrap v4 používa Node Sass na kompiláciu našich zdrojových súborov Sass do súborov CSS (zahrnuté v našom procese zostavovania). Aby ste pri kompilácii Sass pomocou vlastného kanála aktív skončili s rovnakým vygenerovaným CSS, budete musieť použiť kompilátor Sass, ktorý podporuje aspoň funkcie, ktoré má Node Sass. Toto je dôležité poznamenať, pretože od 26. októbra 2020 sú LibSass a nad ním postavené balíčky – vrátane Node Sass – zastarané .
Ak požadujete novšie funkcie Sass alebo kompatibilitu s novšími štandardmi CSS, Dart Sass je teraz primárnou implementáciou Sass a podporuje JavaScript API, ktoré je plne kompatibilné s Node Sass (s niekoľkými výnimkami uvedenými na GitHub stránke Dart Sass ).
Zvýšime presnosť zaokrúhľovania Sass na 6 (v predvolenom nastavení je to 5 v Node Sass), aby sme predišli problémom so zaokrúhľovaním prehliadača. Ak používate Dart Sass, nebudete to musieť upravovať, pretože tento kompilátor používa presnosť zaokrúhľovania 10 a z dôvodov efektívnosti to neumožňuje.
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 .
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
/bootstrap
adresára spustitenpm run docs-serve
v príkazovom riadku. - Otvorte
http://localhost:9001/
v 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
.