Veidot rīkus

Uzziniet, kā izmantot Bootstrap iekļautos npm skriptus, lai izveidotu mūsu dokumentāciju, apkopotu pirmkodu, izpildītu testus un veiktu citas darbības.

Šajā lapā

Instrumentu iestatīšana

Bootstrap savā veidošanas sistēmā izmanto npm skriptus . Mūsu pakete.json ietver ērtas metodes darbam ar ietvaru, tostarp koda kompilēšanu, testu izpildi un daudz ko citu.

Lai izmantotu mūsu būvēšanas sistēmu un lokāli palaistu mūsu dokumentāciju, jums būs nepieciešama Bootstrap avota failu un Node kopija. Veiciet šīs darbības, un jums vajadzētu būt gatavam šūpošanai:

Lejupielādējiet un instalējiet Node.js , ko izmantojam, lai pārvaldītu savas atkarības.
Lejupielādējiet Bootstrap avotus vai atveriet Bootstrap repozitoriju .
Pārejiet uz saknes /bootstrapdirektoriju un palaidiet npm install, lai instalētu mūsu vietējās atkarības, kas norādītas failā package.json .

Kad tas būs pabeigts, varēsit palaist dažādas komandas, kas tiek nodrošinātas no komandrindas.

Izmantojot npm skriptus

Mūsu pakete.json ietver daudzus uzdevumus projekta izstrādei. Palaist npm run, lai redzētu visus npm skriptus savā terminālī. Galvenie uzdevumi ietver:

Uzdevums	Apraksts
`npm start`	Apkopo CSS un JavaScript, izveido dokumentāciju un startē vietējo serveri.
`npm run dist`	Izveido `dist/`direktoriju ar apkopotajiem failiem. Nepieciešams Sass , Autoprefixer un terser .
`npm test`	Pēc palaišanas veic testus lokāli`npm run dist`
`npm run docs-serve`	Veido un palaiž dokumentāciju lokāli.

Sāciet darbu ar Bootstrap, izmantojot mūsu sākuma projektu, izmantojot npm! Dodieties uz twbs/bootstrap-npm-starter veidņu repozitoriju, lai uzzinātu, kā izveidot un pielāgot Bootstrap savā npm projektā. Ietver Sass kompilatoru, Autoprefixer, Stylelint, PurgeCSS un Bootstrap ikonas.

Sass

Bootstrap izmanto Dart Sass , lai mūsu Sass avota failus kompilētu CSS failos (iekļauts mūsu veidošanas procesā), un mēs iesakām darīt to pašu, ja kompilējat Sass, izmantojot savu līdzekļu konveijeru. Iepriekš mēs izmantojām Node Sass operētājsistēmai Bootstrap v4, taču LibSass un uz tā izveidotās pakotnes, tostarp Node Sass, tagad ir novecojušas .

Dart Sass izmanto noapaļošanas precizitāti 10 un efektivitātes apsvērumu dēļ neļauj pielāgot šo vērtību. Mēs nepazeminām šo precizitāti mūsu ģenerētā CSS turpmākās apstrādes laikā, piemēram, minimizēšanas laikā, taču, ja izvēlaties to darīt, mēs iesakām saglabāt precizitāti vismaz 6, lai novērstu pārlūkprogrammas noapaļošanas problēmas.

Autoprefiksators

Bootstrap izmanto Autoprefixer (iekļauts mūsu veidošanas procesā), lai automātiski pievienotu pārdevēja prefiksus dažiem CSS rekvizītiem izveides laikā. Šādi rīkojoties, mēs ietaupām laiku un kodu, ļaujot mums rakstīt galvenās mūsu CSS daļas vienu reizi, vienlaikus novēršot vajadzību pēc pārdevēju kombinācijām, piemēram, tām, kas atrodamas v3.

Mēs uzturam to pārlūkprogrammu sarakstu, kuras atbalsta, izmantojot Autoprefixer, atsevišķā failā mūsu GitHub repozitorijā. Plašāku informāciju skatiet .browserslistrc .

RTLCSS

Bootstrap izmanto RTLCSS , lai apstrādātu kompilētos CSS un pārvērstu tos par RTL — būtībā aizstājot horizontālās virzienu apzinošās īpašības (piemēram padding-left, ) ar pretējo. Tas ļauj mums rakstīt CSS tikai vienu reizi un veikt nelielus pielāgojumus, izmantojot RTLCSS vadības un vērtību direktīvas.

Vietējā dokumentācija

Lai lokāli darbinātu mūsu dokumentāciju, ir jāizmanto Hugo, kas tiek instalēta, izmantojot pakotni hugo-bin npm. Hugo ir pārsteidzoši ātrs un diezgan paplašināms statisko vietņu ģenerators, kas nodrošina: pamata ietver, uz Markdown balstītus failus, veidnes un daudz ko citu. Lūk, kā to sākt:

Izpildiet iepriekš minēto rīku iestatīšanu , lai instalētu visas atkarības.
No saknes /bootstrapdirektorija palaidiet npm run docs-servekomandrindā.
Atveriet http://localhost:9001/pārlūkprogrammā un var.

Uzziniet vairāk par Hugo lietošanu, izlasot tā dokumentāciju .

Problēmu novēršana

Ja rodas problēmas ar atkarību instalēšanu, atinstalējiet visas iepriekšējās atkarības versijas (globālās un vietējās). Pēc tam palaidiet vēlreiz npm install.