Yakha izixhobo

Funda indlela yokusebenzisa i-Bootstrap equkiweyo yemibhalo eshicilelweyo ye-npm ukwakha amaxwebhu ethu, ukuqokelela ikhowudi yemvelaphi, ukuqhuba iimvavanyo, kunye nokunye.

Kweli phepha

Ukuseta izixhobo

I-Bootstrap isebenzisa izikripthi ze-npm zenkqubo yayo yokwakha. Iphakheji.json yethu ibandakanya iindlela ezifanelekileyo zokusebenza kunye nesakhelo, kubandakanya ukuqulunqa ikhowudi, ukuqhuba iimvavanyo, kunye nokunye.

Ukusebenzisa inkqubo yethu yokwakha kwaye usebenzise amaxwebhu ethu ekuhlaleni, uya kufuna ikopi yeefayile zemvelaphi yeBootstrap kunye neNode. Landela la manyathelo kwaye kuya kufuneka ukuba ulungele ukushukuma:

Khuphela kwaye ufake i-Node.js , esiyisebenzisayo ukulawula ukuxhomekeka kwethu.
Ukhuphelo lwemithombo yeBootstrap okanye ifolokhwe yendawo yokugcina yeBootstrap .
Lawula kulawulo lweengcambu /bootstrapkwaye ubaleke npm installukufaka ukuxhomekeka kwethu kwendawo edweliswe kwi package.json .

Xa ugqityiwe, uya kukwazi ukusebenzisa imiyalelo eyahlukeneyo enikezelweyo kumgca womyalelo.

Ukusebenzisa izikripthi ze-npm

Iphakheji yethu.json ibandakanya imisebenzi emininzi yokuphuhlisa iprojekthi. Baleka npm runukuze ubone zonke izikripthi ze-npm kwitheminali yakho. Imisebenzi ephambili ibandakanya:

Umsebenzi	Inkcazo
`npm start`	Iqokelela i-CSS kunye neJavaScript, yakha amaxwebhu, kwaye iqalisa iseva yendawo.
`npm run dist`	Yenza `dist/`uvimba weefayili ngeefayile eziqokelelweyo. Ifuna iSass , iAutoprefixer , kunye neterser .
`npm test`	Iqhuba iimvavanyo ekuhlaleni emva kokubaleka`npm run dist`
`npm run docs-serve`	Yakha kwaye iqhuba uxwebhu ekuhlaleni.

Qalisa ngeBootstrap nge-npm ngeprojekthi yethu yokuqalisa! Intloko uye kwi- twbs/bootstrap-npm-starter template repository ukubona indlela yokwakha kunye nokwenza ngokwezifiso i-Bootstrap kwiprojekthi yakho ye-npm. Kubandakanya i-Sass compiler, i-Autoprefixer, i-Stylelint, i-PurgeCSS, kunye ne-Icons ze-Bootstrap.

Sass

I- Bootstrap isebenzisa iDart Sass ukuqulunqa iifayile zethu zomthombo weSass kwiifayile zeCSS (ezibandakanyiweyo kwinkqubo yethu yokwakha), kwaye sicebisa ukuba wenze okufanayo ukuba uqulunqa iSass usebenzisa owakho umbhobho we-asethi. Ngaphambili sasebenzisa i-Node Sass ye-Bootstrap v4, kodwa i-LibSass kunye neepakethi ezakhiwe phezu kwayo, kuquka i-Node Sass, ngoku zihoxisiwe .

I-Dart Sass isebenzisa ukuchaneka okujikelezayo kwe-10 kwaye ngenxa yezizathu ezisebenzayo ayivumeli ukulungiswa kweli xabiso. Asiyithobi le ngcaciso ngexesha lokuqhubela phambili kwe-CSS yethu eyenziweyo, njengaxa uncitshiswa, kodwa ukuba ukhetha ukwenza njalo sincoma ukugcina ukuchaneka okungama-6 ukuthintela imiba ngokurhangqwa kwebrawuza.

Autoprefixer

I- Bootstrap isebenzisa i -Autoprefixer (ebandakanyiweyo kwinkqubo yethu yokwakha) ukongeza ngokuzenzekelayo izimaphambili zomthengisi kwezinye iipropathi zeCSS ngexesha lokwakha. Ukwenza oko kusigcina ixesha kunye nekhowudi ngokusivumela ukuba sibhale iinxalenye eziphambili zeCSS yethu ngexesha elinye ngelixa sisusa imfuno yokuxutywa komthengisi njengabo bafumaneka kwi-v3.

Sigcina uluhlu lwezikhangeli ezixhaswayo nge-Autoprefixer kwifayile eyahlukileyo ngaphakathi kwendawo yethu yokugcina iGitHub. Bona .browserlistrc ngeenkcukacha.

I-RTLCSS

I- Bootstrap isebenzisa i -RTLCSS ukucubungula i-CSS eqokelelweyo kwaye iyiguqulele kwi-RTL - ngokusisiseko ibuyisela iipropati eziqaphela umkhomba-ndlela othe tye (umzekelo. padding-left) ngokuchasana kwazo. Ivumela ukuba sibhale i-CSS yethu ngexesha elinye kwaye senze ii-tweaks ezincinci sisebenzisa ulawulo lwe-RTLCSS kunye nezikhokelo zexabiso .

Amaxwebhu asekuhlaleni

Ukuqhuba amaxwebhu ethu ekuhlaleni kufuna ukusetyenziswa kweHugo, efakwa nge- hugo-bin npm package. I-Hugo yijenereyitha yesiza esime ngokukhawuleza ekhawulezayo kwaye eyandisiweyo esinika: isiseko sibandakanya, iifayile ezisekwe kuMarkdown, iitemplates, kunye nokunye. Nantsi indlela yokuyiqalisa:

Qhuba useto lwesixhobo ngasentla ukufaka zonke izinto ezixhomekeke kuyo.
Ukusuka /bootstrapkulawulo lweengcambu, sebenzisa npm run docs-servekumgca womyalelo.
Vula kwisikhangeli http://localhost:9001/sakho, kwaye voilà.

Funda ngakumbi malunga nokusebenzisa uHugo ngokufunda amaxwebhu ayo .

Ukulungisa ingxaki

Ukuba udibana neengxaki ngokufakela ukuxhomekeka, khupha zonke iinguqulelo zangaphambili zokuxhomekeka (kwihlabathi jikelele kunye nelasekhaya). Emva koko, phinda wenze npm install.