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 .
/bootstrapNenda kwenye saraka ya mizizi na ukimbienpm installkusakinisha 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 kazi nyingi za kuunda mradi. Endesha npm runili kuona hati zote za npm kwenye terminal yako. Kazi kuu ni pamoja na:
| Kazi | Maelezo |
|---|---|
npm start |
Hukusanya CSS na JavaScript, huunda hati, na kuanzisha seva ya ndani. |
npm run dist |
Huunda dist/saraka na faili zilizokusanywa. Inahitaji 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. |
Sass
Bootstrap hutumia Dart Sass kuunda faili zetu za chanzo cha Sass katika faili za CSS (zilizojumuishwa katika mchakato wetu wa uundaji), na tunapendekeza ufanye vivyo hivyo ikiwa unatayarisha Sass kwa kutumia bomba la kipengee chako. Hapo awali tulitumia Node Sass kwa Bootstrap v4, lakini LibSass na vifurushi vilivyojengwa juu yake, ikiwa ni pamoja na Node Sass, sasa havitumiki .
Dart Sass hutumia usahihi wa mzunguko wa 10 na kwa sababu za ufanisi hairuhusu marekebisho ya thamani hii. Hatupunguzi usahihi huu wakati wa uchakataji zaidi wa CSS yetu iliyotolewa, kama vile wakati wa kupunguza, lakini ikiwa ulichagua kufanya hivyo, tunapendekeza udumishe usahihi wa angalau 6 ili kuzuia matatizo ya kuzungusha kivinjari.
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.
RTLCSS
Bootstrap hutumia RTLCSS kuchakata CSS iliyokusanywa na kuibadilisha kuwa RTL - kimsingi ikibadilisha sifa za ufahamu wa mwelekeo mlalo (km. padding-left) na kinyume chake. Inaturuhusu tu kuandika CSS yetu mara moja na kufanya marekebisho madogo kwa kutumia udhibiti wa RTLCSS na maagizo ya thamani .
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.
/bootstrapKutoka kwenye saraka ya mizizi , endeshanpm run docs-servekwenye 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.