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:
- Sæktu og settu upp Node.js , sem við notum til að stjórna ósjálfstæði okkar.
- Annaðhvort halaðu niður heimildum Bootstrap eða gafflaðu geymslu Bootstrap .
- Farðu í rótarskrána
/bootstrap
og keyrðunpm install
til 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 dist bý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 run
til að sjá öll npm forskriftirnar.
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ð:
- Keyrðu í gegnum verkfærauppsetninguna hér að ofan til að setja upp öll ósjálfstæði.
- Frá rótarskránni
/bootstrap
skaltu keyranpm run docs-serve
í skipanalínunni. - 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
.