Konstruu ilojn

Lernu kiel uzi la npm-skriptojn de Bootstrap por konstrui nian dokumentaron, kompili fontkodon, ruli testojn kaj pli.

Sur ĉi tiu paĝo

Ilara aranĝo

Bootstrap uzas npm-skriptojn por sia konstrusistemo. Nia package.json inkluzivas oportunajn metodojn por labori kun la kadro, inkluzive de kompili kodon, ruli testojn kaj pli.

Por uzi nian konstrusistemon kaj ruli nian dokumentaron loke, vi bezonos kopion de la fontdosieroj kaj Node de Bootstrap. Sekvu ĉi tiujn paŝojn kaj vi devus esti preta skui:

Elŝutu kaj instalu Node.js , kiun ni uzas por administri niajn dependecojn.
Aŭ elŝutu la fontojn de Bootstrap aŭ forku la deponejon de Bootstrap .
Navigu al la radika /bootstrapdosierujo kaj rulu npm installpor instali niajn lokajn dependecojn listigitajn en package.json .

Kiam vi komplete, vi povos ruli la diversajn komandojn provizitajn de la komandlinio.

Uzante npm-skriptojn

Nia package.json inkluzivas multajn taskojn por disvolvi la projekton. Kuru npm runpor vidi ĉiujn npm-skriptojn en via terminalo. Ĉefaj taskoj inkluzivas:

Tasko	Priskribo
`npm start`	Kompilas CSS kaj JavaScript, konstruas la dokumentaron kaj lanĉas lokan servilon.
`npm run dist`	Kreas la `dist/`dosierujon kun kompilitaj dosieroj. Postulas Sass , Aŭtomatprefiksilon kaj terser .
`npm test`	Rulas testojn loke post kurado`npm run dist`
`npm run docs-serve`	Konstruas kaj prizorgas la dokumentaron loke.

Komencu kun Bootstrap per npm kun nia komenca projekto! Iru al la twbs/bootstrap-npm-starter- ŝablona deponejo por vidi kiel konstrui kaj personecigi Bootstrap en via propra npm-projekto. Inkluzivas Sass-kompililon, Autoprefixer, Stylelint, PurgeCSS kaj Bootstrap-Ikonojn.

Sass

Bootstrap uzas Dart Sass por kompili niajn Sass-fontajn dosierojn en CSS-dosierojn (inkluditaj en nia konstruprocezo), kaj ni rekomendas, ke vi faru la samon se vi kompilas Sass per via propra valoraĵo-dukto. Ni antaŭe uzis Node Sass por Bootstrap v4, sed LibSass kaj pakaĵoj konstruitaj sur ĝi, inkluzive de Node Sass, nun estas malrekomenditaj .

Dart Sass uzas rondan precizecon de 10 kaj pro efikeckialoj ne permesas alĝustigon de ĉi tiu valoro. Ni ne malaltigas ĉi tiun precizecon dum plua prilaborado de nia generita CSS, kiel dum minimumigo, sed se vi elektas fari tion, ni rekomendas konservi precizecon de almenaŭ 6 por malhelpi problemojn kun retumila rondigo.

Aŭtomata prefiksilo

Bootstrap uzas Autoprefixer (inkluzivita en nia konstruprocezo) por aŭtomate aldoni vendistajn prefiksojn al iuj CSS-ecoj je konstrua tempo. Fari tion ŝparas al ni tempon kaj kodon permesante al ni skribi ŝlosilajn partojn de nia CSS unufoje dum vi forigas la bezonon de vendistaj miksaĵoj kiel tiuj trovitaj en v3.

Ni konservas la liston de retumiloj subtenataj per Autoprefixer en aparta dosiero ene de nia GitHub-deponejo. Vidu .browserslistrc por detaloj.

RTLCSS

Bootstrap uzas RTLCSS por prilabori kompilitan CSS kaj konverti ilin al RTL - esence anstataŭigante horizontalajn direktajn proprietojn (ekz. padding-left) per ilia malo. Ĝi permesas al ni skribi nian CSS nur unufoje kaj fari etajn ĝustigojn per RTLCSS- kontrolo kaj valordirektivoj .

Loka dokumentaro

Ruli nian dokumentaron loke postulas la uzon de Hugo, kiu estas instalita per la pako hugo-bin npm. Hugo estas ege rapida kaj sufiĉe etendebla senmova generatoro, kiu provizas nin: bazajn inkludojn, Markdown-bazitajn dosierojn, ŝablonojn kaj pli. Jen kiel komenci ĝin:

Trairu la ilan agordon supre por instali ĉiujn dependecojn.
El la radika /bootstrapdosierujo, rulu npm run docs-serveen la komandlinio.
Malfermu http://localhost:9001/en via retumilo, kaj voilà.

Lernu pli pri uzado de Hugo legante ĝian dokumentadon .

Solvado de problemoj

Se vi renkontas problemojn pri instalado de dependecoj, malinstalu ĉiujn antaŭajn dependecajn versiojn (tutmondajn kaj lokajn). Poste, rerulu npm install.