in English

Gina kayan aikin

Koyi yadda ake amfani da rubutun npm na Bootstrap da aka haɗa don gina takaddun mu, tattara lambar tushe, gudanar da gwaje-gwaje, da ƙari.

Saitin kayan aiki

Bootstrap yana amfani da rubutun npm don tsarin ginin sa. Kunshin mu.json ya haɗa da hanyoyin dacewa don aiki tare da tsarin, gami da haɗa lamba, gwaje-gwaje masu gudana, da ƙari.

Don amfani da tsarin ginin mu da gudanar da takaddunmu a gida, kuna buƙatar kwafin fayilolin tushen Bootstrap da Node. Bi waɗannan matakan kuma yakamata ku kasance cikin shiri don girgiza:

  1. Zazzage kuma shigar Node.js , wanda muke amfani da shi don sarrafa abubuwan dogaronmu.
  2. Ko dai zazzage tushen Bootstrap ko ma'ajiyar cokali mai yatsa ta Bootstrap .
  3. Kewaya zuwa tushen /bootstrapdirectory kuma gudu npm installdon shigar da abubuwan dogaronmu na gida da aka jera a cikin kunshin.json .

Lokacin da aka gama, zaku iya aiwatar da umarni daban-daban da aka bayar daga layin umarni.

Yin amfani da rubutun npm

Kunshin mu.json ya ƙunshi umarni da ayyuka masu zuwa:

Aiki Bayani
npm run dist npm run distyana ƙirƙirar kundin /dist/adireshi tare da haɗa fayilolin. Yana amfani da Sass , Autoprefixer , da terser .
npm test Yana gudanar da gwaje-gwaje a gida bayan gudunpm run dist
npm run docs-serve Gina da gudanar da takaddun a cikin gida.

Gudu npm rundon ganin duk rubutun npm.

Fara da Bootstrap ta hanyar npm tare da aikin farawa! Shugaban zuwa wurin ajiyar samfuri na twbs/bootstrap-npm-starter don ganin yadda ake ginawa da keɓance Bootstrap a cikin aikin npm naku. Ya haɗa da mai tara Sass, Autoprefixer, Stylelint, PurgeCSS, da Gumakan Bootstrap.

Sass

Bootstrap v4 yana amfani da Node Sass don tattara fayilolin tushen Sass zuwa fayilolin CSS (wanda aka haɗa cikin tsarin ginin mu). Domin gamawa da CSS iri ɗaya da aka ƙirƙira yayin haɗa Sass ta amfani da bututun kadari na ku, kuna buƙatar amfani da na'ura mai haɗawa da Sass wanda ke goyan bayan fasalin da Node Sass ke yi. Wannan yana da mahimmanci a lura saboda tun daga ranar 26 ga Oktoba, 2020, LibSass da fakitin da aka gina a saman sa—ciki har da Node Sass—an ƙare .

Idan kuna buƙatar sabbin fasalulluka na Sass ko dacewa tare da sabbin ma'auni na CSS, Dart Sass yanzu shine farkon aiwatar da Sass kuma yana goyan bayan API JavaScript wanda ya dace da Node Sass (tare da ƴan keɓantacce da aka jera akan Dart Sass's GitHub page ).

Muna haɓaka madaidaicin zagaye na Sass zuwa 6 (ta tsohuwa, 5 ne a cikin Node Sass) don hana al'amura tare da zagayawa mai bincike. Idan kun yi amfani da Dart Sass wannan ba zai zama wani abu da kuke buƙatar daidaitawa ba, saboda mai tarawa yana amfani da madaidaicin madaidaicin 10 kuma saboda dalilai masu inganci baya barin a daidaita shi.

Autoprefixer

Bootstrap yana amfani da Autoprefixer (wanda aka haɗa a cikin tsarin ginin mu) don ƙara prefixes na tallace-tallace ta atomatik zuwa wasu kaddarorin CSS a lokacin ginawa. Yin haka yana ceton mu lokaci da lamba ta hanyar ba mu damar rubuta mahimman sassan CSS ɗin mu lokaci guda yayin kawar da buƙatar haɗaɗɗun masu siyarwa kamar waɗanda aka samu a v3.

Muna kula da jerin masu binciken da aka tallafa ta hanyar Autoprefixer a cikin wani fayil daban a cikin ma'ajin GitHub. Duba .browslistrc don cikakkun bayanai.

Takardun gida

Gudanar da takaddun mu a cikin gida yana buƙatar amfani da Hugo, wanda ake shigar da shi ta kunshin hugo-bin npm. Hugo babban janareta ne mai saurin gaske kuma mai saurin gaske wanda ke ba mu: asali ya haɗa da, fayilolin Markdown, samfura, da ƙari. Ga yadda za a fara shi:

  1. Shiga cikin saitin kayan aikin da ke sama don shigar da duk abin dogaro.
  2. Daga tushen /bootstrapdirectory, gudu npm run docs-servea cikin layin umarni.
  3. Bude http://localhost:9001/a cikin burauzar ku, kuma voilà.

Ƙara koyo game da amfani da Hugo ta karanta takaddun sa .

Shirya matsala

Idan kun haɗu da matsaloli tare da shigar da abubuwan dogaro, cire duk nau'ikan dogaro da suka gabata (na duniya da na gida). Sa'an nan, sake yi npm install.