in English

Konstruu ilojn

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

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:

  1. Elŝutu kaj instalu Node.js , kiun ni uzas por administri niajn dependecojn.
  2. Aŭ elŝutu la fontojn de Bootstrap aŭ forku la deponejon de Bootstrap .
  3. 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 la jenajn komandojn kaj taskojn:

Tasko Priskribo
npm run dist npm run distkreas la /dist/dosierujon kun kompilitaj dosieroj. Uzas Sass , Autoprefixer , kaj terser .
npm test Rulas testojn loke post kuradonpm run dist
npm run docs-serve Konstruas kaj prizorgas la dokumentaron loke.

Kuru npm runpor vidi ĉiujn npm-skriptojn.

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 v4 uzas Node Sass por kompili niajn fontdosierojn de Sass en CSS-dosierojn (inkluditaj en nia konstruprocezo). Por fini kun la sama generita CSS dum kompilado de Sass uzante vian propran valoraĵan dukton, vi devos uzi Sass-kompililon, kiu subtenas almenaŭ la funkciojn kiujn faras Node Sass. Ĉi tio gravas noti ĉar ekde la 26-a de oktobro 2020, LibSass kaj pakaĵoj konstruitaj sur ĝi—inkluzive de Node Sass—estas malrekomenditaj .

Se vi postulas pli novajn Sass-funkciojn aŭ kongruon kun pli novaj CSS-normoj, Dart Sass nun estas la ĉefa efektivigo de Sass kaj subtenas JavaScript API kiu estas plene kongrua kun Node Sass (kun kelkaj esceptoj listigitaj sur la GitHub-paĝo de Dart Sass ).

Ni pliigas la precizecon de rondigo de Sass al 6 (defaŭlte, ĝi estas 5 en Node Sass) por malhelpi problemojn kun retumila rondigo. Se vi uzas Dart Sass, ĉi tio ne estos io, kion vi bezonos alĝustigi, ĉar tiu kompililo uzas rondigan precizecon de 10 kaj pro efikeckialoj ne permesas ĝin esti alĝustita.

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.

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:

  1. Trairu la ilan agordon supre por instali ĉiujn dependecojn.
  2. El la radika /bootstrapdosierujo, rulu npm run docs-serveen la komandlinio.
  3. 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.