in English

Sestavte nástroje

Naučte se používat skripty npm zahrnuté v Bootstrapu k sestavení naší dokumentace, kompilaci zdrojového kódu, spouštění testů a dalším.

Nastavení nářadí

Bootstrap používá pro svůj systém sestavení skripty npm . Náš package.json obsahuje pohodlné metody pro práci s frameworkem, včetně kompilace kódu, spouštění testů a dalších.

Chcete-li použít náš systém sestavení a spustit naši dokumentaci lokálně, budete potřebovat kopii zdrojových souborů Bootstrapu a uzlu. Postupujte podle těchto kroků a měli byste být připraveni na rock:

  1. Stáhněte a nainstalujte Node.js , který používáme ke správě našich závislostí.
  2. Buď si stáhněte zdrojové kódy Bootstrapu nebo rozvětvte úložiště Bootstrapu .
  3. Přejděte do kořenového /bootstrapadresáře a spusťte npm installinstalaci našich místních závislostí uvedených v package.json .

Po dokončení budete moci spouštět různé příkazy poskytované z příkazového řádku.

Použití skriptů npm

Náš package.json obsahuje následující příkazy a úkoly:

Úkol Popis
npm run dist npm run distvytvoří /dist/adresář se zkompilovanými soubory. Používá Sass , Autoprefixer a Terser .
npm test Po spuštění spustí testy lokálněnpm run dist
npm run docs-serve Lokálně vytváří a spouští dokumentaci.

Spuštěním npm runzobrazíte všechny skripty npm.

Začněte s Bootstrap přes npm s naším startovacím projektem! Přejděte do úložiště šablon twbs/bootstrap-npm-starter , kde se dozvíte, jak vytvořit a přizpůsobit Bootstrap ve svém vlastním projektu npm. Zahrnuje Sass kompilátor, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

Sass

Bootstrap v4 používá Node Sass pro kompilaci našich zdrojových souborů Sass do souborů CSS (zahrnuto v našem procesu sestavování). Chcete-li při kompilaci Sass pomocí vlastního kanálu aktiv skončit se stejně vygenerovaným CSS, budete muset použít kompilátor Sass, který podporuje alespoň funkce, které Node Sass dělá. To je důležité si uvědomit, protože od 26. října 2020 jsou LibSass a balíčky na něm postavené – včetně Node Sass – zastaralé .

Pokud požadujete novější funkce Sass nebo kompatibilitu s novějšími standardy CSS, Dart Sass je nyní primární implementací Sass a podporuje JavaScript API, které je plně kompatibilní s Node Sass (s několika výjimkami uvedenými na stránce GitHub Dart Sass ).

Zvýšíme přesnost zaokrouhlování Sass na 6 (ve výchozím nastavení je to v Node Sass 5), abychom předešli problémům se zaokrouhlováním prohlížeče. Pokud používáte Dart Sass, nebude to nic, co byste museli upravovat, protože tento kompilátor používá přesnost zaokrouhlení 10 a z důvodu efektivity to neumožňuje upravit.

Autoprefixer

Bootstrap používá Autoprefixer (zahrnutý v našem procesu sestavování) k automatickému přidávání předpon dodavatele k některým vlastnostem CSS v době sestavování. To nám šetří čas a kód, protože nám umožňuje psát klíčové části našeho CSS jednou a zároveň eliminuje potřebu mixů výrobců, jako jsou ty, které se nacházejí ve verzi 3.

Seznam prohlížečů podporovaných prostřednictvím Autoprefixer udržujeme v samostatném souboru v našem úložišti GitHub. Podrobnosti viz .browserslistrc .

Místní dokumentace

Spuštění naší dokumentace lokálně vyžaduje použití Hugo, které se instaluje prostřednictvím balíčku hugo-bin npm. Hugo je neuvěřitelně rychlý a poměrně rozšiřitelný generátor statických stránek, který nám poskytuje: základní zahrnutí, soubory založené na Markdown, šablony a další. Zde je návod, jak to začít:

  1. Projděte nastavením nástrojů výše a nainstalujte všechny závislosti.
  2. Z kořenového /bootstrapadresáře spusťte npm run docs-servev příkazovém řádku.
  3. Otevřete http://localhost:9001/v prohlížeči a voilà.

Další informace o používání Huga naleznete v jeho dokumentaci .

Odstraňování problémů

Pokud narazíte na problémy s instalací závislostí, odinstalujte všechny předchozí verze závislostí (globální i místní). Poté spusťte znovu npm install.