in English

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:

  1. Stiahnite si a nainštalujte Node.js , ktorý používame na správu našich závislostí.
  2. Stiahnite si zdroje Bootstrapu alebo rozdeľte úložisko Bootstrapu .
  3. 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 nasledujúce príkazy a úlohy:

Úloha Popis
npm run dist npm run distvytvorí /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 runzobrazíte všetky skripty npm.

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

  1. Prejdite cez nastavenie nástrojov vyššie a nainštalujte všetky závislosti.
  2. Z koreňového /bootstrapadresára spustite npm run docs-servev príkazovom riadku.
  3. 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.