in English

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:

  1. Lejupielādējiet un instalējiet Node.js , ko izmantojam, lai pārvaldītu savas atkarības.
  2. Lejupielādējiet Bootstrap avotus vai atveriet Bootstrap repozitoriju .
  3. 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 package.json ietver šādas komandas un uzdevumus:

Uzdevums Apraksts
npm run dist npm run distizveido /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.

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 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:

  1. Izpildiet iepriekš minēto rīku iestatīšanu , lai instalētu visas atkarības.
  2. No saknes /bootstrapdirektorija palaidiet npm run docs-servekomandrindā.
  3. 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.