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:
- Stáhněte a nainstalujte Node.js , který používáme ke správě našich závislostí.
- Buď si stáhněte zdrojové kódy Bootstrapu nebo rozvětvte úložiště Bootstrapu .
- Přejděte do kořenového
/bootstrap
adresáře a spusťtenpm install
instalaci 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 dist vytvoří /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 run
zobrazíte všechny skripty npm.
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:
- Projděte nastavením nástrojů výše a nainstalujte všechny závislosti.
- Z kořenového
/bootstrap
adresáře spusťtenpm run docs-serve
v příkazovém řádku. - 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
.