in English

Smíða verkfæri

Lærðu hvernig á að nota Bootstrap meðfylgjandi npm forskriftir til að búa til skjöl okkar, setja saman frumkóða, keyra próf og fleira.

Uppsetning verkfæra

Bootstrap notar npm forskriftir fyrir byggingarkerfið sitt. Package.json okkar inniheldur þægilegar aðferðir til að vinna með rammanum, þar á meðal að setja saman kóða, keyra próf og fleira.

Til að nota byggingarkerfið okkar og keyra skjölin okkar á staðnum þarftu afrit af frumskrám Bootstrap og Node. Fylgdu þessum skrefum og þú ættir að vera tilbúinn til að rokka:

  1. Sæktu og settu upp Node.js , sem við notum til að stjórna ósjálfstæði okkar.
  2. Annaðhvort halaðu niður heimildum Bootstrap eða gafflaðu geymslu Bootstrap .
  3. Farðu í rótarskrána /bootstrapog keyrðu npm installtil að setja upp staðbundin ósjálfstæði okkar sem skráð eru í package.json .

Þegar því er lokið muntu geta keyrt hinar ýmsu skipanir sem gefnar eru upp frá skipanalínunni.

Notaðu npm forskriftir

Package.json okkar inniheldur eftirfarandi skipanir og verkefni:

Verkefni Lýsing
npm run dist npm run distbýr til /dist/möppuna með samsettum skrám. Notar Sass , Autoprefixer og terser .
npm test Keyrir prófanir á staðnum eftir hlaupnpm run dist
npm run docs-serve Byggir og keyrir skjölin á staðnum.

Hlaupa npm runtil að sjá öll npm forskriftirnar.

Byrjaðu með Bootstrap í gegnum npm með byrjunarverkefninu okkar! Farðu í twbs/bootstrap-npm-starter sniðmátsgeymsluna til að sjá hvernig á að smíða og sérsníða Bootstrap í þínu eigin npm verkefni. Inniheldur Sass þýðanda, Autoprefixer, Stylelint, PurgeCSS og Bootstrap Icons.

Sass

Bootstrap v4 notar Node Sass til að setja Sass frumskrárnar okkar saman í CSS skrár (innifalinn í byggingarferlinu okkar). Til þess að enda með sama myndaða CSS þegar þú setur Sass saman með því að nota þína eigin eignapípu þarftu að nota Sass þýðanda sem styður að minnsta kosti þá eiginleika sem Node Sass gerir. Þetta er mikilvægt að hafa í huga vegna þess að frá og með 26. október 2020 eru LibSass og pakkar sem byggðir eru ofan á það - þar á meðal Node Sass - úreltar .

Ef þú þarfnast nýrri Sass eiginleika eða eindrægni við nýrri CSS staðla, er Dart Sass nú aðal útfærsla Sass og styður JavaScript API sem er fullkomlega samhæft við Node Sass (með nokkrum undantekningum sem skráðar eru á GitHub síðu Dart Sass ).

Við aukum Sass námundunarnákvæmni í 6 (sjálfgefið er það 5 í Node Sass) til að koma í veg fyrir vandamál með námundun vafra. Ef þú notar Dart Sass er þetta ekki eitthvað sem þú þarft að stilla, þar sem sá þýðandi notar námundunarnákvæmni upp á 10 og leyfir ekki að stilla hann af hagkvæmnisástæðum.

Autoprefixer

Bootstrap notar Autoprefixer (innifalið í byggingarferlinu okkar) til að bæta sjálfkrafa forskeytum söluaðila við sumar CSS eiginleika á byggingartíma. Með því að gera það sparar okkur tíma og kóða með því að leyfa okkur að skrifa lykilhluta CSS okkar einu sinni á sama tíma og útrýma þörfinni fyrir söluaðilablöndur eins og þær sem finnast í v3.

Við höldum listanum yfir vafra sem studdir eru í gegnum Autoprefixer í sérstakri skrá innan GitHub geymslunnar okkar. Sjá .browserslistrc fyrir frekari upplýsingar.

Staðbundin skjöl

Til að keyra skjölin okkar á staðnum þarf að nota Hugo, sem er sett upp í gegnum hugo-bin npm pakkann. Hugo er ofboðslega hraðvirkur og nokkuð stækkanlegur kyrrstæður vefsíðnaframleiðandi sem veitir okkur: undirstöðuatriði, Markdown-tengdar skrár, sniðmát og fleira. Svona á að koma því af stað:

  1. Keyrðu í gegnum verkfærauppsetninguna hér að ofan til að setja upp öll ósjálfstæði.
  2. Frá rótarskránni /bootstrapskaltu keyra npm run docs-serveí skipanalínunni.
  3. Opnaðu http://localhost:9001/í vafranum þínum og voilà.

Lærðu meira um notkun Hugo með því að lesa skjöl hans .

Bilanagreining

Ef þú lendir í vandræðum með að setja upp ósjálfstæði skaltu fjarlægja allar fyrri útgáfur af ósjálfstæði (alheims og staðbundin). Síðan skaltu endursýna npm install.