Veidot rīkus
Uzziniet, kā izmantot Bootstrap iekļautos npm skriptus, lai izveidotu mūsu dokumentāciju, apkopotu pirmkodu, palaistu testus un daudz ko citu.
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
/bootstrap
direktoriju un palaidietnpm 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 package.json ietver šādas komandas un uzdevumus:
Uzdevums | Apraksts |
---|---|
npm run dist |
npm run dist izveido /dist/ direktoriju ar apkopotajiem failiem. Izmanto Sass , Autoprefixer un terser . |
npm test |
Pēc palaišanas veic testus lokālinpm run dist |
npm run docs-serve |
Veido un palaiž dokumentāciju lokāli. |
Palaist npm run
, lai redzētu visus npm skriptus.
Sass
Bootstrap v4 izmanto Node Sass , lai mūsu Sass avota failus kompilētu CSS failos (iekļauts mūsu veidošanas procesā). Lai, kompilējot Sass, izmantojot savu līdzekļu konveijeru, iegūtu to pašu ģenerēto CSS, jums būs jāizmanto Sass kompilators, kas atbalsta vismaz tās funkcijas, kuras nodrošina Node Sass. Tas ir svarīgi atzīmēt, jo no 2020. gada 26. oktobra LibSass un uz tā izveidotās pakotnes, tostarp Node Sass, ir novecojušas .
Ja jums ir nepieciešamas jaunākas Sass funkcijas vai saderība ar jaunākiem CSS standartiem, Dart Sass tagad ir galvenā Sass ieviešana un atbalsta JavaScript API, kas ir pilnībā saderīga ar Node Sass (ar dažiem izņēmumiem, kas norādīti Dart Sass GitHub lapā ).
Mēs palielinām Sass noapaļošanas precizitāti līdz 6 (pēc noklusējuma tas ir 5 Node Sass), lai novērstu problēmas ar pārlūkprogrammas noapaļošanu. Ja izmantojat Dart Sass, tas nav jāpielāgo, jo šis kompilators izmanto noapaļošanas precizitāti 10 un efektivitātes apsvērumu dēļ neļauj to pielāgot.
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 .
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
/bootstrap
direktorija palaidietnpm run docs-serve
komandrindā. - 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
.