Tools bauen
Léiert wéi Dir Bootstrap's abegraff npm Scripte benotzt fir eis Dokumentatioun ze bauen, Quellcode ze kompiléieren, Tester auszeféieren, a méi.
Tooling Setup
Bootstrap benotzt npm Scripte fir säi Build System. Eis package.json enthält praktesch Methoden fir mam Kader ze schaffen, inklusiv Kompiléierungscode, Lafen Tester, a méi.
Fir eise Build System ze benotzen an eis Dokumentatioun lokal auszeféieren, braucht Dir eng Kopie vun de Bootstrap Quelldateien an Node. Follegt dës Schrëtt an Dir sollt prett sinn ze rocken:
- Eroflueden an installéieren Node.js , déi mir benotze fir eis Ofhängegkeeten ze managen.
- Entweder luet d'Bootstrap Quellen erof oder fork Bootstrap's Repository .
- Navigéiert an de Root
/bootstrap
-Verzeichnis a lafennpm install
fir eis lokal Ofhängegkeeten ze installéieren, déi an package.json opgezielt sinn .
Wann Dir fäerdeg sidd, kënnt Dir déi verschidde Kommandoen aus der Kommandozeil ausféieren.
Benotzt npm Scripten
Eis package.json enthält vill Aufgaben fir de Projet z'entwéckelen. Run npm run
fir all d'npm Scripten an Ärem Terminal ze gesinn. Primär Aufgaben enthalen:
Aufgab | Beschreiwung |
---|---|
npm start |
Kompiléiert CSS a JavaScript, baut d'Dokumentatioun a fänkt e lokale Server un. |
npm run dist |
Erstellt den dist/ Dossier mat kompiléierten Dateien. Verlaangt Sass , Autoprefixer , an Terser . |
npm test |
Leeft Tester lokal no Lafennpm run dist |
npm run docs-serve |
Baut a leeft d'Dokumentatioun lokal. |
Sass
Bootstrap benotzt Dart Sass fir eis Sass Quelldateien an CSS Dateien ze kompiléieren (an eisem Bauprozess abegraff), a mir recommandéieren Iech datselwecht ze maachen wann Dir Sass kompiléiert mat Ärer eegener Asset Pipeline. Mir hunn virdru Node Sass fir Bootstrap v4 benotzt, awer LibSass a Packagen déi drop gebaut sinn, dorënner Node Sass, ginn elo ofgeschaaft .
Dart Sass benotzt eng Ronn Präzisioun pa 10 a fir Effizienz Grënn erlaabt net Upassung vun dësem Wäert. Mir senken dës Präzisioun net wärend der weiderer Veraarbechtung vun eisem generéierten CSS, sou wéi während der Minifikatioun, awer wann Dir dat gewielt hutt, empfeelen mir Iech eng Präzisioun vu mindestens 6 ze halen fir Probleemer mat Browser-Ronnung ze vermeiden.
Autoprefixer
Bootstrap benotzt Autoprefixer (abegraff an eisem Build-Prozess) fir automatesch Verkeefer Präfixe fir e puer CSS-Eegeschafte bei der Bauzäit ze addéieren. Dat ze maachen spuert eis Zäit a Code andeems mir eis Schlësseldeeler vun eisem CSS eng eenzeg Kéier schreiwen, wärend d'Bedierfnes fir Verkeefermixins eliminéiert wéi déi am v3 fonnt ginn.
Mir halen d'Lëscht vun de Browser ënnerstëtzt duerch Autoprefixer an enger separater Datei an eisem GitHub Repository. Gesinn .browserslistrc fir Detailer.
RTLCSS
Bootstrap benotzt RTLCSS fir kompiléiert CSS ze verarbeiten an se op RTL ze konvertéieren - am Fong ersat horizontale Richtungsbewosst Properties (zB. padding-left
) mat hirem Géigendeel. Et erlaabt eis nëmmen eis CSS eng eenzeg Kéier ze schreiwen a kleng Tweaks mat RTLCSS Kontroll- a Wäertdirektive ze maachen .
Lokal Dokumentatioun
Eis Dokumentatioun lokal ze lafen erfuerdert d'Benotzung vum Hugo, deen iwwer den Hugo-bin npm Package installéiert gëtt. Hugo ass e blazingly schnellen an zimlech erweiterbare statesche Site Generator deen eis ubitt: Basis enthält, Markdown-baséiert Dateien, Templates, a méi. Hei ass wéi et unzefänken:
- Run duerch den Tooling-Setup hei uewen fir all Ofhängegkeeten ze installéieren.
- Aus dem Root
/bootstrap
Verzeechnes, lafennpm run docs-serve
an der Kommandozeil. - Open
http://localhost:9001/
an Ärem Browser, a voilà.
Léiert méi iwwer d'Benotzung vum Hugo andeems Dir seng Dokumentatioun liest .
Troubleshooting
Sollt Dir Problemer mat der Installatioun vun Ofhängegkeeten begéinen, deinstalléiert all fréier Ofhängegkeetsversioune (global a lokal). Dann, widderhuelen npm install
.