Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Sukurti įrankius

Sužinokite, kaip naudoti „Bootstrap“ įtrauktus npm scenarijus kuriant mūsų dokumentaciją, kompiliuojant šaltinio kodą, atliekant testus ir kt.

Šiame puslapyje

Įrankių sąranka

„ Bootstrap “ savo kūrimo sistemai naudoja npm scenarijus . Mūsų package.json apima patogius darbo su sistema metodus, įskaitant kodo kompiliavimą, testų vykdymą ir kt.

Jei norite naudoti mūsų kūrimo sistemą ir paleisti dokumentaciją vietoje, jums reikės „Bootstrap“ šaltinio failų ir „Node“ kopijos. Atlikite šiuos veiksmus ir būsite pasiruošę sūpuoti:

  1. Atsisiųskite ir įdiekite Node.js , kurią naudojame savo priklausomybėms valdyti.
  2. Atsisiųskite „Bootstrap“ šaltinius arba paleiskite „Bootstrap“ saugyklą .
  3. Eikite į šakninį /bootstrapkatalogą ir paleiskite npm install, kad įdiegtumėte mūsų vietines priklausomybes, nurodytas pakete.json .

Baigę galėsite paleisti įvairias komandas, pateiktas komandinėje eilutėje.

Naudojant npm scenarijus

Mūsų package.json apima daugybę projekto kūrimo užduočių. Vykdykite npm run, kad pamatytumėte visus npm scenarijus savo terminale. Pagrindinės užduotys apima:

Užduotis apibūdinimas
npm start Kompiliuoja CSS ir JavaScript, sukuria dokumentaciją ir paleidžia vietinį serverį.
npm run dist Sukuria dist/katalogą su kompiliuotais failais. Reikia Sass , Autoprefixer ir terser .
npm test Po paleidimo atlieka bandymus vietojenpm run dist
npm run docs-serve Kuria ir vykdo dokumentaciją vietoje.
Pradėkite naudoti „Bootstrap“ naudodami „npm“ su mūsų pradedančiuoju projektu! Eikite į twbs/bootstrap-npm-starter šablonų saugyklą ir sužinokite, kaip sukurti ir tinkinti Bootstrap savo npm projekte. Apima Sass kompiliatorių, Autoprefixer, Stylelint, PurgeCSS ir Bootstrap piktogramas.

Sass

„ Bootstrap“ naudoja „ Dart Sass “, kad kompiliuotų „Sass“ šaltinio failus į CSS failus (įtrauktas į mūsų kūrimo procesą), todėl rekomenduojame tą patį padaryti, jei „Sass“ kompiliuojate naudodami savo išteklių konvejerį. Anksčiau naudojome „Node Sass“, skirtą „Bootstrap v4“, tačiau „LibSass“ ir ant jo sukurti paketai, įskaitant „Node Sass“, dabar nebenaudojami .

„Dart Sass“ naudoja 10 apvalinimo tikslumą ir efektyvumo sumetimais neleidžia koreguoti šios vertės. Nemažiname šio tikslumo toliau apdorojant sugeneruotą CSS, pvz., mažinant, bet jei pasirinkote tai padaryti, rekomenduojame išlaikyti bent 6 tikslumą, kad išvengtumėte problemų dėl naršyklės apvalinimo.

Automatinis prefiksatorius

„ Bootstrap“ naudoja automatinį prefiksatorių (įtrauktą į mūsų kūrimo procesą), kad kūrimo metu automatiškai pridėtų tiekėjo priešdėlius prie kai kurių CSS ypatybių. Taip sutaupome laiko ir kodo, nes leidžiame vieną kartą parašyti pagrindines CSS dalis ir nereikia naudoti tiekėjų rinkinių, tokių kaip 3 v. versijoje.

„Autoprefixer“ palaikomų naršyklių sąrašą laikome atskirame „GitHub“ saugyklos faile. Daugiau informacijos rasite .browserslistrc .

RTLCSS

„ Bootstrap“ naudoja RTLCSS , kad apdorotų kompiliuotą CSS ir konvertuotų juos į RTL – iš esmės pakeičiant horizontalias krypties savybes (pvz. padding-left, ) priešingomis. Tai leidžia mums tik vieną kartą parašyti CSS ir atlikti nedidelius pakeitimus naudojant RTLCSS valdymo ir vertės direktyvas.

Vietinė dokumentacija

Norint vykdyti dokumentaciją vietoje, reikia naudoti „Hugo“, kuri įdiegiama per „ hugo-bin npm“ paketą. „Hugo“ yra nepaprastai greitas ir gana išplečiamas statinių svetainių generatorius, suteikiantis mums: pagrindinius, „Markdown“ pagrįstus failus, šablonus ir kt. Štai kaip tai pradėti:

  1. Vykdykite anksčiau pateiktą įrankių sąranką , kad įdiegtumėte visas priklausomybes.
  2. Iš šakninio /bootstrapkatalogo paleiskite npm run docs-servekomandų eilutę.
  3. Atidarykite http://localhost:9001/savo naršyklėje ir galia.

Sužinokite daugiau apie Hugo naudojimą skaitydami jo dokumentaciją .

Problemų sprendimas

Jei kyla problemų diegiant priklausomybes, pašalinkite visas ankstesnes priklausomybių versijas (pasaulinę ir vietinę). Tada paleiskite iš naujo npm install.