in English

Ehitustööriistad

Siit saate teada, kuidas kasutada Bootstrapi kaasasolevaid npm-skripte meie dokumentatsiooni koostamiseks, lähtekoodi kompileerimiseks, testide käitamiseks ja muuks.

Tööriistade seadistamine

Bootstrap kasutab oma ehitussüsteemis npm-skripte . Meie package.json sisaldab mugavaid meetodeid raamistikuga töötamiseks, sealhulgas koodi koostamine, testide käitamine ja palju muud.

Meie ehitussüsteemi kasutamiseks ja dokumentatsiooni kohapeal käitamiseks vajate Bootstrapi lähtefailide ja sõlme koopiat. Järgige neid samme ja peaksite olema rokkimiseks valmis:

  1. Laadige alla ja installige Node.js , mida kasutame oma sõltuvuste haldamiseks.
  2. Laadige alla Bootstrapi allikad või ühendage Bootstrapi hoidla .
  3. Navigeerige juurkataloogi /bootstrapja käivitage failis package.jsonnpm install loetletud kohalike sõltuvuste installimiseks .

Kui olete lõpetanud, saate käivitada erinevaid käsurealt antud käske.

Npm-skriptide kasutamine

Meie package.json sisaldab järgmisi käske ja ülesandeid:

Ülesanne Kirjeldus
npm run dist npm run distloob /dist/kompileeritud failidega kataloogi. Kasutab Sassi , Autoprefixerit ja terserit .
npm test Käivitab pärast käivitamist kohapeal testenpm run dist
npm run docs-serve Ehitab ja käitab dokumentatsiooni kohapeal.

Käivitage npm run, et näha kõiki npm-skripte.

Alustage Bootstrapiga npm-i kaudu meie stardiprojektiga! Minge mallide hoidlasse twbs/bootstrap-npm-starter , et näha, kuidas Bootstrapi oma npm-projektis luua ja kohandada. Sisaldab Sassi kompilaatorit, Autoprefixerit, Stylelinti, PurgeCSS-i ja Bootstrapi ikoone.

Sass

Bootstrap v4 kasutab Node Sassi meie Sassi lähtefailide kompileerimiseks CSS-failideks (see on kaasatud meie ehitusprotsessi). Selleks, et Sassi oma varakonveieri abil kompileerides saaksite lõpuks sama loodud CSS-i, peate kasutama Sassi kompilaatorit, mis toetab vähemalt Node Sassi funktsioone. Seda on oluline tähele panna, sest alates 26. oktoobrist 2020 on LibSass ja selle peale ehitatud paketid, sealhulgas Node Sass, aegunud .

Kui vajate uuemaid Sassi funktsioone või ühilduvust uuemate CSS-i standarditega, on Dart Sass nüüd Sassi esmane juurutus ja toetab JavaScripti API-d, mis ühildub täielikult Node Sassiga (mõne erandiga, mis on loetletud Dart Sassi GitHubi lehel ).

Suurendame Sassi ümardamise täpsust 6-ni (vaikimisi on see Node Sassis 5), et vältida brauseri ümardamisega seotud probleeme. Kui kasutate Dart Sassi, ei pea te seda kohandama, kuna see kompilaator kasutab ümardamise täpsust 10 ja tõhususe huvides ei võimalda seda reguleerida.

Autoprefikser

Bootstrap kasutab automaatprefikserit (mis sisaldub meie ehitusprotsessis), et lisada mõnele CSS-i atribuudile koostamise ajal automaatselt hankija eesliited. See säästab meie aega ja koodi, võimaldades meil kirjutada oma CSS-i põhiosad ühe korra, kõrvaldades samal ajal vajaduse hankijate miksinide järele, nagu need, mida leidub versioonis 3.

Hoiame Autoprefixeri kaudu toetatud brauserite loendit eraldi failis meie GitHubi hoidlas. Vaadake üksikasju .browserslistrc .

Kohalik dokumentatsioon

Meie dokumentatsiooni lokaalne käitamine nõuab Hugo kasutamist, mis installitakse paketi hugo-bin npm kaudu. Hugo on lõõgastavalt kiire ja üsna laiendatav staatiline saidigeneraator, mis pakub meile: põhilised, Markdown-põhised failid, mallid ja palju muud. Selle käivitamiseks tehke järgmist.

  1. Kõigi sõltuvuste installimiseks käivitage ülaltoodud tööriistade seadistus .
  2. /bootstrapKäivitage juurkataloogist npm run docs-servekäsureal.
  3. Avage http://localhost:9001/oma brauseris ja voilà.

Lisateavet Hugo kasutamise kohta leiate selle dokumentatsioonist .

Veaotsing

Kui teil tekib sõltuvuste installimisel probleeme, desinstallige kõik eelmised sõltuvuse versioonid (globaalne ja kohalik). Seejärel käivitage uuesti npm install.