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.

Á þessari síðu

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 /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 fjölmörg verkefni til að þróa verkefnið. Hlaupa npm runtil að sjá öll npm forskriftirnar í flugstöðinni þinni. Aðalverkefni eru:

Verkefni	Lýsing
`npm start`	Tekur saman CSS og JavaScript, smíðar skjölin og ræsir staðbundinn netþjón.
`npm run dist`	Býr til `dist/`möppuna með samsettum skrám. Krefst Sass , Autoprefixer og terser .
`npm test`	Keyrir prófanir á staðnum eftir hlaup`npm run dist`
`npm run docs-serve`	Byggir og keyrir skjölin á staðnum.

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 notar Dart Sass til að setja Sass frumskrárnar okkar saman í CSS skrár (innifalinn í smíðaferlinu okkar), og við mælum með því að þú gerir það sama ef þú ert að setja Sass saman með því að nota þína eigin eignapípu. Við notuðum áður Node Sass fyrir Bootstrap v4, en LibSass og pakkar sem byggðir eru ofan á það, þar á meðal Node Sass, eru nú úreltir .

Dart Sass notar námundunarnákvæmni upp á 10 og leyfir af hagkvæmnisástæðum ekki aðlögun á þessu gildi. Við lækkum ekki þessa nákvæmni við frekari vinnslu á mynduðu CSS okkar, eins og við smækningu, en ef þú velur að gera það mælum við með að viðhalda nákvæmni upp á að minnsta kosti 6 til að koma í veg fyrir vandamál með námundun vafra.

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.

RTLCSS

Bootstrap notar RTLCSS til að vinna úr samansettum CSS og umbreyta þeim í RTL - í grundvallaratriðum kemur í stað láréttra stefnu meðvitaðra eiginleika (td padding-left) fyrir andstæðu þeirra. Það gerir okkur aðeins kleift að skrifa CSS í einu sinni og gera smávægilegar breytingar með því að nota RTLCSS stjórna og gildi tilskipanir.

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 /bootstrapskaltu keyra npm 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.