Tresnak eraiki

Ikasi Bootstrap-en barne npm scriptak nola erabiltzen gure dokumentazioa eraikitzeko, iturburu-kodea konpilatzeko, probak exekutatzeko eta abar.

Tresneriaren konfigurazioa

Bootstrap- ek npm script -ak erabiltzen ditu bere eraikuntza-sistemarako. Gure package.json -ek markoarekin lan egiteko metodo erosoak biltzen ditu, besteak beste, kodea konpilatzea, probak egitea eta abar.

Gure eraikuntza-sistema erabiltzeko eta gure dokumentazioa lokalean exekutatzeko, Bootstrap-en iturburu-fitxategien eta Noderen kopia bat beharko duzu. Jarraitu urrats hauek eta rocka egiteko prest egon beharko zenuke:

Deskargatu eta instalatu Node.js , gure mendekotasunak kudeatzeko erabiltzen duguna.
Deskargatu Bootstrap-en iturburuak edo bideratu Bootstrap-en biltegia .
Joan erroko /bootstrapdirektoriora eta exekutatu package.jsonnpm install -en zerrendatutako gure menpekotasun lokalak instalatzeko .

Amaitutakoan, komando lerrotik emandako hainbat komando exekutatu ahal izango dituzu.

npm scriptak erabiliz

Gure package.json -ek komando eta zeregin hauek ditu:

Zeregin	Deskribapena
`npm run dist`	`npm run dist/dist/`konpilatutako fitxategiekin direktorioa sortzen du . Sass , Autoaurrizkia eta terser erabiltzen ditu .
`npm test`	Exekutatu ondoren lokalean probak egiten ditu`npm run dist`
`npm run docs-serve`	Dokumentazioa lokalean eraiki eta exekutatzen du.

Exekutatu npm runnpm script guztiak ikusteko.

Hasi Bootstrap-ekin npm bidez gure hasierako proiektuarekin! Zoaz twbs /bootstrap-npm-starter txantiloien biltegira Bootstrap zure npm proiektuan nola eraiki eta pertsonalizatu ikusteko. Sass konpilatzailea, Autoprefixer, Stylelint, PurgeCSS eta Bootstrap ikonoak barne hartzen ditu.

Sass

Bootstrap v4-k Node Sass erabiltzen du gure Sass iturburu-fitxategiak CSS fitxategietan konpilatzeko (gure eraikuntza-prozesuan barne). Sass zure aktibo kanalizazioa erabiliz sortutako CSS berdinarekin amaitzeko, Node Sass-ek egiten dituen funtzioak gutxienez onartzen dituen Sass konpilatzaile bat erabili beharko duzu. Garrantzitsua da kontuan izan, 2020ko urriaren 26tik aurrera, LibSass eta haren gainean eraikitako paketeak (Node Sass barne) zaharkituta daudelako .

Sass-en eginbide berriagoak edo CSS estandar berriekin bateragarritasuna behar baduzu, Dart Sass Sass -en inplementazio nagusia da orain eta Node Sass-ekin guztiz bateragarria den JavaScript API bat onartzen du (Dart Sass-en GitHub orrian zerrendatutako salbuespen batzuk salbu ).

Sass biribilketaren zehaztasuna 6ra handitzen dugu (lehenespenez, 5 da Node Sass-en) arakatzailearen biribilketarekin arazoak saihesteko. Dart Sass erabiltzen baduzu, hau ez da egokitu behar duzun zerbait izango, konpiladore horrek 10eko biribilketa-zehaztasuna erabiltzen baitu eta eraginkortasun arrazoiengatik ez baitu doitzen uzten.

Autoaurrizkia

Bootstrap- ek Autoprefixer erabiltzen du (gure eraikuntza-prozesuan barne) saltzaileen aurrizkiak CSS propietate batzuei automatikoki gehitzeko eraikitze-unean. Hori eginez gero, denbora eta kodea aurrezten gaitu, gure CSSaren funtsezko atalak aldi bakar batean idazteko aukera ematen digunez, v3-n aurkitutakoak bezalako hornitzaileen mixinen beharra ezabatuz.

Autoprefixer bidez onartzen diren arakatzaileen zerrenda aparteko fitxategi batean mantentzen dugu GitHub biltegian. Ikus .browserslistrc xehetasunetarako.

Tokiko dokumentazioa

Gure dokumentazioa lokalean exekutatzeak Hugo erabiltzea eskatzen du, hugo-bin npm paketearen bidez instalatzen dena . Hugo gune-sorgailu estatiko izugarri azkarra eta hedagarria da, eta eskaintzen diguna: oinarrizko barneak, Markdown-en oinarritutako fitxategiak, txantiloiak eta abar. Hona hemen nola hasteko:

Exekutatu goiko tresnaren konfigurazioa mendekotasun guztiak instalatzeko.
Erroko /bootstrapdirektoriotik, exekutatu npm run docs-servekomando lerroan.
Ireki http://localhost:9001/arakatzailean, eta listo.

Lortu informazio gehiago Hugo erabiltzeari buruzko dokumentazioa irakurrita .

Arazoak konpontzea

Mendekotasunak instalatzeko arazoak aurkitzen badituzu, desinstalatu aurreko mendekotasun bertsio guztiak (globalak eta lokalak). Ondoren, berriro exekutatu npm install.