Bäitrag

Hëlleft Bootstrap z'entwéckelen mat eiser Dokumentatioun Scripten an Tester bauen.

Op dëser Säit

Tooling Setup

Bootstrap benotzt npm Scripte fir d'Dokumentatioun ze bauen a Quelldateien ze kompiléieren. Eis package.json enthält dës Skripte fir Code ze kompiléieren, Tester ze lafen a méi. Dës sinn net geduecht fir ausserhalb vun eisem Repository an Dokumentatioun ze benotzen.

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 lafen npm installfir 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 runfir 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 Lafen`npm run dist`
`npm run docs-serve`	Baut a leeft d'Dokumentatioun lokal.

Start mat Bootstrap iwwer npm mat eisem Startprojet! Gitt op den twbs/bootstrap-npm-starter Template Repository fir ze kucken wéi Dir Bootstrap an Ärem eegene npm Projet bauen an personaliséiere kënnt. Enthält Sass Compiler, Autoprefixer, Stylelint, PurgeCSS, a Bootstrap Ikonen.

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 /bootstrapVerzeechnes, lafen npm run docs-servean 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.