in English

Ndërtoni mjete

Mësoni se si të përdorni skriptet npm të përfshira të Bootstrap për të ndërtuar dokumentacionin tonë, për të përpiluar kodin burimor, për të ekzekutuar teste dhe më shumë.

Në këtë faqe

Vendosja e veglave

Bootstrap përdor skriptet npm për sistemin e tij të ndërtimit. Paketa.json jonë përfshin metoda të përshtatshme për të punuar me kornizën, duke përfshirë përpilimin e kodit, ekzekutimin e testeve dhe më shumë.

Për të përdorur sistemin tonë të ndërtimit dhe për të ekzekutuar dokumentacionin tonë në nivel lokal, do t'ju duhet një kopje e skedarëve burimor të Bootstrap dhe Node. Ndiqni këto hapa dhe duhet të jeni gati të tundni:

Shkarkoni dhe instaloni Node.js , të cilin e përdorim për të menaxhuar varësitë tona.
Ose shkarkoni burimet e Bootstrap ose forconi depon e Bootstrap .
Navigoni te /bootstrapdirektoria rrënjësore dhe ekzekutoni npm installpër të instaluar varësitë tona lokale të listuara në package.json .

Kur të përfundoni, do të jeni në gjendje të ekzekutoni komandat e ndryshme të ofruara nga linja e komandës.

Përdorimi i skripteve npm

Paketa jonë.json përfshin detyra të shumta për zhvillimin e projektit. Ekzekutoni npm runpër të parë të gjitha skriptet npm në terminalin tuaj. Detyrat kryesore përfshijnë:

Detyrë	Përshkrim
`npm start`	Përpilon CSS dhe JavaScript, ndërton dokumentacionin dhe nis një server lokal.
`npm run dist`	Krijon `dist/`drejtorinë me skedarë të përpiluar. Kërkon Sass , Autoprefiksues dhe terser .
`npm test`	Kryen teste në nivel lokal pas vrapimit`npm run dist`
`npm run docs-serve`	Ndërton dhe ekzekuton dokumentacionin në nivel lokal.

Filloni me Bootstrap përmes npm me projektin tonë fillestar! Drejtohuni te depoja e shablloneve twbs/bootstrap-npm-starter për të parë se si të ndërtoni dhe personalizoni Bootstrap në projektin tuaj npm. Përfshin përpiluesin Sass, Autoprefiksuesin, Styleint, PurgeCSS dhe ikonat e Bootstrap.

Sass

Bootstrap përdor Dart Sass për përpilimin e skedarëve tanë burimor Sass në skedarët CSS (të përfshira në procesin tonë të ndërtimit) dhe ju rekomandojmë të bëni të njëjtën gjë nëse jeni duke përpiluar Sass duke përdorur linjën tuaj të aseteve. Ne kemi përdorur më parë Node Sass për Bootstrap v4, por LibSass dhe paketat e ndërtuara në krye të tij, duke përfshirë Node Sass, tani janë të vjetruara .

Dart Sass përdor një saktësi rrumbullakimi prej 10 dhe për arsye efikasiteti nuk lejon rregullimin e kësaj vlere. Ne nuk e ulim këtë saktësi gjatë përpunimit të mëtejshëm të CSS-së sonë të krijuar, si p.sh. gjatë minimit, por nëse vendosni ta bëni këtë, ju rekomandojmë të mbani një saktësi prej të paktën 6 për të parandaluar problemet me rrumbullakimin e shfletuesit.

Autoprefiksues

Bootstrap përdor Autoprefixer (i përfshirë në procesin tonë të ndërtimit) për të shtuar automatikisht prefikset e shitësit në disa veti CSS në kohën e ndërtimit. Duke bërë këtë, na kursen kohë dhe kod duke na lejuar të shkruajmë pjesët kryesore të CSS-së tonë një herë të vetme, duke eliminuar nevojën për përzierje të shitësve si ato që gjenden në v3.

Ne e mbajmë listën e shfletuesve të mbështetur përmes Autoprefixer në një skedar të veçantë brenda depove tona të GitHub. Shihni .browserslistrc për detaje.

RTLCSS

Bootstrap përdor RTLCSS për të përpunuar CSS të përpiluara dhe për t'i kthyer ato në RTL - në thelb duke zëvendësuar vetitë e vetëdijshme për drejtimin horizontal (p.sh. padding-left) me të kundërtën e tyre. Na lejon të shkruajmë CSS-në tonë vetëm një herë dhe të bëjmë rregullime të vogla duke përdorur direktivat e kontrollit dhe vlerës së RTLCSS .

Dokumentacioni lokal

Ekzekutimi i dokumentacionit tonë në nivel lokal kërkon përdorimin e Hugo, i cili instalohet nëpërmjet paketës hugo-bin npm. Hugo është një gjenerues i faqeve statike jashtëzakonisht të shpejtë dhe mjaft të zgjerueshëm që na ofron: përfshirje bazë, skedarë të bazuar në Markdown, shabllone dhe më shumë. Ja se si ta filloni:

Kaloni përmes konfigurimit të veglave të mësipërme për të instaluar të gjitha varësitë.
Nga direktoria rrënjësore /bootstrap, ekzekutoni npm run docs-servenë vijën e komandës.
Hapeni http://localhost:9001/në shfletuesin tuaj dhe voilà.

Mësoni më shumë rreth përdorimit të Hugo duke lexuar dokumentacionin e tij .

Zgjidhja e problemeve

Nëse hasni probleme me instalimin e varësive, çinstaloni të gjitha versionet e mëparshme të varësisë (globale dhe lokale). Pastaj, riprodhoni npm install.