in English

Yɛ nnwinnade a wɔde bɛyɛ adwuma

Sua sɛnea wode Bootstrap no npm scripts a ɛka ho no bedi dwuma de akyekye yɛn nkrataa, aboaboa source code ano, ayɛ sɔhwɛ ahorow, ne nea ɛkeka ho.

Nnwinnade nhyehyɛe

Bootstrap de npm scripts di dwuma ma ne dan nhyehyɛe no. Yɛn package.json no wɔ akwan a ɛyɛ mmerɛw a wɔfa so de framework no yɛ adwuma, a nea ɛka ho ne code a wɔbɛboaboa ano, sɔhwɛ ahorow a wɔde tu mmirika, ne nea ɛkeka ho.

Sɛ wode yɛn build system no bedi dwuma na woayɛ yɛn documentation no wɔ locally a, wubehia Bootstrap no source files ne Node no bi. Di anammɔn yi akyi na ɛsɛ sɛ woyɛ krado sɛ wobɛwosow:

  1. Twe na install Node.js , a yɛde di dwuma de hwɛ yɛn dependencies so.
  2. Twe Bootstrap no fibea ahorow anaasɛ fork Bootstrap no adekorabea .
  3. Kɔ root /bootstrapdirectory no so na tu mmirika npm installkɔ instɔl yɛn local dependencies a wɔakyerɛw wɔ package.json mu no.

Sɛ wowie a, wobɛtumi ayɛ ahyɛdeɛ ahodoɔ a wɔde ama no afiri ahyɛdeɛ kwan no so.

Npm nkyerɛwde a wɔde di dwuma

Yɛn package.json no ka ahyɛde ne nnwuma a edidi so yi ho:

Adwuma Nkyerɛmu
npm run dist npm run distyɛ /dist/directory no a fael ahorow a wɔaboaboa ano wom. Ɔde Sass , Autoprefixer , ne terser di dwuma .
npm test Tu mmirika sɔhwɛ ahorow wɔ mpɔtam hɔ bere a watu mmirika awie nonpm run dist
npm run docs-serve Ɔkyekye na ɔyɛ nkrataa no wɔ mpɔtam hɔ.

Mmirikatu npm runkɔhwɛ npm scripts no nyinaa.

Fi ase ne Bootstrap via npm ne yɛn starter project! Fa w’ani kyerɛ twbs/bootstrap-npm-starter template repository no mu kɔhwɛ sɛnea wobɛkyekye na woayɛ Bootstrap wɔ w’ankasa npm adwuma no mu. Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ne Bootstrap Ahyɛnsodeɛ ka ho.

Sass

Bootstrap v4 de Node Sass di dwuma de boaboa yɛn Sass fibea fael ahorow ano kɔ CSS fael ahorow mu (a ɛka yɛn dan nhyehyɛe no ho). Sɛnea ɛbɛyɛ a wobɛwie CSS koro no ara a wɔayɛ no bere a woreboaboa Sass ano denam w’ankasa agyapade pipeline so no, ɛho behia sɛ wode Sass compiler a anyɛ yiye koraa no ɛboa nneɛma a Node Sass yɛ no di dwuma. Eyi ho hia sɛ yɛhyɛ no nsow efisɛ ɛde besi October 26, 2020 no, LibSass ne package ahorow a wɔasisi wɔ so—a Node Sass ka ho— wɔagyae .

Sɛ wopɛ Sass nneɛma foforo anaasɛ ɛne CSS gyinapɛn foforo hyia a, mprempren Dart Sass ne Sass a wɔde di dwuma titiriw na ɛboa JavaScript API a ɛne Node Sass hyia koraa (gye kakraa bi a wɔakyerɛw wɔ Dart Sass GitHub krataafa no so ).

Yɛma Sass rounding precision no kɔ soro kɔ 6 (default no, ɛyɛ 5 wɔ Node Sass mu) de siw nsɛm a ɛfa browser rounding ho no ano. Sɛ wode Dart Sass di dwuma a eyi renyɛ biribi a ɛsɛ sɛ woyɛ nsakrae, sɛnea saa compiler no de rounding precision a ɛyɛ 10 di dwuma na esiane efficiency nti ɛmma kwan sɛ wɔnyɛ nsakrae.

Autoprefixer a wɔde di dwuma

Bootstrap de Autoprefixer (a ɛka yɛn adansi nhyehyɛe no ho) di dwuma de ankasa de vendor prefixes ka CSS agyapade binom ho wɔ ɔdansi bere mu. Saa a yɛyɛ no ma yɛkora yɛn bere ne koodu so denam ma a ɛma yetumi kyerɛw yɛn CSS no afã atitiriw prɛko pɛ bere a eyi hia a ɛho hia sɛ yɛde vendor mixins te sɛ nea wohu wɔ v3 no fi hɔ no so.

Yɛhwɛ browser ahorow a ɛnam Autoprefixer so boa no din so wɔ fael soronko bi mu wɔ yɛn GitHub adekorabea no mu. Hwɛ .browserslistrc ma nsɛm no mu nsɛm.

Mpɔtam hɔ nkrataa a wɔakyerɛw

Yɛn nkrataa a yɛde bɛyɛ adwuma wɔ mpɔtam hɔ no hwehwɛ sɛ yɛde Hugo di dwuma, a ɛnam hugo-bin npm paket no so nya instɔlehyɛn. Hugo yɛ blazingly fast na koraa extensible static site generator a ɛma yɛn: mfitiaseɛ ka ho, Markdown-gyina fael, templates, ne nea ɛkeka ho. Ɔkwan a wobɛfa so afi ase ni:

  1. Run fa tooling setup a ɛwɔ atifi hɔ no mu na fa dependencies nyinaa hyɛ mu.
  2. Efi ntini /bootstrapkyerɛwtohɔ no mu, tu mmirika npm run docs-servewɔ ahyɛde kwan no mu.
  3. Bue http://localhost:9001/wɔ wo browser no mu, na voilà.

Sua pii fa Hugo a wode bedi dwuma ho denam ne nkrataa a wobɛkenkan no so .

Ɔhaw ahorow a wodi ho dwuma

Sɛ wohyia ɔhaw wɔ dependencies instɔlehyɛn mu a, yi dependency nkyerɛaseɛ a atwam no nyinaa (wiase nyinaa ne mpɔtam hɔ). Afei, san tu mmirika bio npm install.