Kujenga zana
Jifunze jinsi ya kutumia hati za npm zilizojumuishwa za Bootstrap ili kuunda hati zetu, kukusanya msimbo wa chanzo, kufanya majaribio, na zaidi.
Mpangilio wa zana
Bootstrap hutumia hati za npm kwa mfumo wake wa ujenzi. Kifurushi chetu.json kinajumuisha mbinu zinazofaa za kufanya kazi na mfumo, ikiwa ni pamoja na kukusanya msimbo, kufanya majaribio, na zaidi.
Ili kutumia mfumo wetu wa ujenzi na kuendesha hati zetu ndani ya nchi, utahitaji nakala ya faili chanzo za Bootstrap na Node. Fuata hatua hizi na unapaswa kuwa tayari kutikisa:
- Pakua na usakinishe Node.js , ambayo tunaitumia kudhibiti utegemezi wetu.
- Pakua vyanzo vya Bootstrap au hazina ya Bootstrap ya uma .
/bootstrap
Nenda kwenye saraka ya mizizi na ukimbienpm install
kusakinisha vitegemezi vyetu vya ndani vilivyoorodheshwa katika package.json .
Ikikamilika, utaweza kutekeleza amri mbalimbali zinazotolewa kutoka kwa mstari wa amri.
Kutumia maandishi ya npm
Kifurushi chetu.json kinajumuisha amri na kazi zifuatazo:
Kazi | Maelezo |
---|---|
npm run dist |
npm run dist huunda /dist/ saraka na faili zilizokusanywa. Hutumia Sass , Autoprefixer , na terser . |
npm test |
Hufanya majaribio ndani ya nchi baada ya kukimbianpm run dist |
npm run docs-serve |
Huunda na kuendesha hati ndani ya nchi. |
Endesha npm run
ili kuona hati zote za npm.
Sass
Bootstrap v4 hutumia Node Sass kuunda faili zetu za chanzo cha Sass katika faili za CSS (zilizojumuishwa katika mchakato wetu wa ujenzi). Ili kuishia na CSS iliyozalishwa sawa wakati wa kuunda Sass kwa kutumia bomba la mali yako mwenyewe, utahitaji kutumia kikusanyaji cha Sass kinachoauni angalau vipengele ambavyo Node Sass hufanya. Hili ni muhimu kuzingatiwa kwa sababu kuanzia tarehe 26 Oktoba 2020, LibSass na vifurushi vilivyojengwa juu yake—pamoja na Node Sass—vimeacha kutumika .
Iwapo unahitaji vipengele vipya zaidi vya Sass au uoanifu na viwango vipya zaidi vya CSS, Dart Sass sasa ndiyo utekelezwaji msingi wa Sass na inaauni API ya JavaScript ambayo inaafikiana kikamilifu na Node Sass (isipokuwa chache zilizoorodheshwa kwenye ukurasa wa GitHub wa Dart Sass ).
Tunaongeza usahihi wa mzunguko wa Sass hadi 6 (kwa chaguo-msingi, ni 5 katika Node Sass) ili kuzuia masuala ya kuzungusha kivinjari. Ikiwa unatumia Dart Sass hii haitakuwa kitu unachohitaji kurekebisha, kwani mkusanyaji huyo hutumia usahihi wa 10 na kwa sababu za ufanisi hairuhusu kurekebishwa.
Kiambishi kiambishi otomatiki
Bootstrap hutumia Autoprefixer (iliyojumuishwa katika mchakato wetu wa ujenzi) kuongeza kiambishi awali cha muuzaji kwa baadhi ya mali za CSS kwa wakati wa ujenzi. Kufanya hivyo hutuokoa wakati na msimbo kwa kuturuhusu kuandika sehemu muhimu za CSS yetu mara moja huku tukiondoa hitaji la michanganyiko ya wachuuzi kama ile inayopatikana katika v3.
Tunadumisha orodha ya vivinjari vinavyotumika kupitia Autoprefixer katika faili tofauti ndani ya hazina yetu ya GitHub. Tazama .browserslistrc kwa maelezo.
Nyaraka za ndani
Kuendesha hati zetu ndani ya nchi kunahitaji matumizi ya Hugo, ambayo husakinishwa kupitia kifurushi cha hugo-bin npm. Hugo ni jenereta ya tovuti tuli yenye kasi ya ajabu na inayoweza kupanuka kabisa ambayo hutupatia: msingi ni pamoja na, faili zinazotegemea Markdown, violezo, na zaidi. Hivi ndivyo jinsi ya kuianzisha:
- Tembea kupitia usanidi wa zana hapo juu ili kusakinisha vitegemezi vyote.
/bootstrap
Kutoka kwenye saraka ya mizizi , endeshanpm run docs-serve
kwenye mstari wa amri.- Fungua
http://localhost:9001/
katika kivinjari chako, na voilà.
Jifunze zaidi kuhusu kutumia Hugo kwa kusoma hati zake .
Utatuzi wa shida
Ukikumbana na matatizo ya kusakinisha vitegemezi, sanidua matoleo yote ya awali ya utegemezi (ya kimataifa na ya ndani). Kisha, rudia npm install
.