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ë.

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:

  1. Shkarkoni dhe instaloni Node.js , të cilin e përdorim për të menaxhuar varësitë tona.
  2. Ose shkarkoni burimet e Bootstrap ose forconi depon e Bootstrap .
  3. 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 komandat dhe detyrat e mëposhtme:

Detyrë Përshkrim
npm run dist npm run distkrijon /dist/drejtorinë me skedarë të përpiluar. Përdor Sass , Autoprefikser dhe terser .
npm test Kryen teste në nivel lokal pas vrapimitnpm run dist
npm run docs-serve Ndërton dhe ekzekuton dokumentacionin në nivel lokal.

Ekzekutoni npm runpër të parë të gjitha skriptet npm.

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 v4 përdor Node Sass për përpilimin e skedarëve tanë burimor Sass në skedarët CSS (të përfshira në procesin tonë të ndërtimit). Në mënyrë që të përfundoni me të njëjtën CSS të gjeneruar kur përpiloni Sass duke përdorur linjën tuaj të aseteve, do t'ju duhet të përdorni një përpilues Sass që mbështet të paktën veçoritë që bën Node Sass. Kjo është e rëndësishme të theksohet sepse që nga data 26 tetor 2020, LibSass dhe paketat e ndërtuara në krye të tij - duke përfshirë Node Sass - janë zhvlerësuar .

Nëse keni nevojë për veçori më të reja të Sass ose përputhshmëri me standardet më të reja CSS, Dart Sass tani është implementimi kryesor i Sass dhe mbështet një API JavaScript që është plotësisht në përputhje me Node Sass (me disa përjashtime të listuara në faqen GitHub të Dart Sass ).

Ne e rrisim saktësinë e rrumbullakimit të Sass në 6 (si parazgjedhje, është 5 në Node Sass) për të parandaluar problemet me rrumbullakimin e shfletuesit. Nëse përdorni Dart Sass, kjo nuk do të jetë diçka që duhet ta rregulloni, pasi ai përpilues përdor një saktësi rrumbullakimi prej 10 dhe për arsye efikasiteti nuk lejon që të rregullohet.

Autoprefiksues

Bootstrap përdor Autoprefixer (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. Bërja e kësaj na kursen kohë dhe kod duke na lejuar të shkruajmë pjesë kyçe të CSS-së tonë një herë të vetme duke eliminuar nevojën për miks 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.

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:

  1. Kaloni përmes konfigurimit të veglave të mësipërme për të instaluar të gjitha varësitë.
  2. Nga direktoria rrënjësore /bootstrap, ekzekutoni npm run docs-servenë vijën e komandës.
  3. 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.