Goşant goşuň

“Bootstrap” -y resminamalarymyzy gurmak skriptleri we synaglary bilen ösdürmäge kömek ediň.

Bu sahypada

Gural gurmak

Bootstrap resminamalary gurmak we çeşme faýllaryny düzmek üçin npm skriptlerini ulanýar. Package.json kodumyzy düzmek, synag synaglary we başgalar üçin bu skriptleri özünde jemleýär . Bular ammarymyzyň we resminamalarymyzyň daşynda ulanmak üçin niýetlenen däldir.

Gurluşyk ulgamymyzy ulanmak we resminamalarymyzy ýerli derejede işletmek üçin Bootstrap-yň deslapky faýllarynyň we düwünleriniň bir nusgasy gerek bolar. Bu ädimleri ýerine ýetiriň we daşlaşmaga taýyn bolmaly:

Baglylyklarymyzy dolandyrmak üçin ulanýan Node.js-i göçürip alyň .
“Bootstrap” -yň çeşmelerini göçürip alyň ýa -da “Bootstrap” ammaryny göçürip alyň .
/bootstrapKök katalogyna geçiň we package.jsonnpm install -da görkezilen ýerli garaşlylyklarymyzy gurmak üçin işlediň .

Gutaransoň, buýruk setirinden berlen dürli buýruklary işledip bilersiňiz.

Npm skriptlerini ulanmak

Package.json taslamamyzy ösdürmek üçin köp sanly meseläni öz içine alýar. npm runTerminalyňyzdaky ähli npm skriptlerini görmek üçin ylgaň . Esasy meseleler şulary öz içine alýar:

Wezipe	Düşündiriş
`npm start`	CSS we JavaScript-i düzýär, resminamalary gurýar we ýerli serweri açýar.
`npm run dist`	`dist/`Toplanan faýllar bilen katalogy döredýär . Sass , Autoprefixer we terser talap edýär .
`npm test`	Işledilenden soň ýerli synaglary geçirýär`npm run dist`
`npm run docs-serve`	Resminamalary ýerli derejede gurýar we işleýär.

Başlangyç taslamamyz bilen npm arkaly Bootstrap bilen başlaň! Bootstrap-y öz npm taslamaňyzda nädip gurmalydygyny we sazlamalydygyny görmek üçin twbs / bootstrap-npm-starter şablon ammaryna başlaň. Sass düzüjisi, Autoprefixer, Stylelint, PurgeCSS we Bootstrap nyşanlaryny öz içine alýar.

Sass

“ Bootstrap ”, Sass çeşme faýllarymyzy CSS faýllaryna düzmek üçin “ Dart Sass ” -y ulanýar (gurluşyk işimize girýär) we Sass-y öz aktiw turbageçirijiňiz bilen düzýän bolsaňyz, edil şonuň ýaly etmegi maslahat berýäris. Öň “Bootstrap v4” üçin “Node Sass” -y ulanýardyk, ýöne “LibSass” we onuň üstünde gurlan paketler, “Node Sass” -lary indi köneldi .

Dart Sass 10 tegelek takyklygy ulanýar we netijelilik sebäpli bu bahanyň sazlanmagyna ýol bermeýär. Döredilen CSS-ni hasam gaýtadan işlemek wagtynda kiçeltmek döwründe bu takyklygy peseltmeýäris, ýöne muny saýlasaňyz, brauzeriň tegelek bolmagy bilen baglanyşykly meseleleriň öňüni almak üçin azyndan 6 takyklygy saklamagy maslahat berýäris.

Awtofrefikser

“ Bootstrap ” “ Autoprefixer ” -i (gurluşyk işimize girýär) satyjy prefikslerini gurmak wagtynda käbir CSS häsiýetlerine awtomatiki goşmak üçin ulanýar. Şeýle etmek, vS-de tapylanlar ýaly satyjy garyndylara bolan zerurlygy aradan aýyrmak bilen CSS-iň esasy böleklerini bir gezek ýazmaga mümkinçilik bermek bilen wagt we kod tygşytlaýar.

Autoprefixer arkaly goldanýan brauzerleriň sanawyny GitHub ammarymyzdaky aýratyn faýlda saklaýarys. Jikme-jiklikler üçin .browserslistrc serediň .

RTLCSS

Bootstrap , düzülen CSS-ni gaýtadan işlemek we RTL-e öwürmek üçin RTLCSSpadding-left ulanýar - esasan gorizontal ugry bilýän häsiýetleri (meselem ) tersine çalyşýar. Diňe CSS-ni ýekeje gezek ýazmaga we RTLCSS gözegçilik we baha görkezmelerini ulanyp ownuk üýtgeşmeler girizmäge mümkinçilik berýär.

Localerli resminamalar

Resminamalarymyzy ýerli derejede işletmek, hugo-bin npm paketiniň üsti bilen gurnalan Hugo-ny ulanmagy talap edýär . Gýugo, bize hödürleýän çalt we giňelip bilýän statiki saýt generatory: esasy, Markdown esasly faýllar, şablonlar we ş.m. Ine, nädip başlamaly:

Dependhli baglylyklary gurmak üçin ýokardaky gurallar guralyny işlediň .
Kök katalogyndan buýruk setirinde /bootstrapişlediň .npm run docs-serve
http://localhost:9001/Brauzeriňizde açyň we voilà.

Gýugo resminamalaryny okamak bilen has giňişleýin öwreniň .

Näsazlyklary düzeltmek

Baglylyklary gurmak bilen baglanyşykly kynçylyklar bilen ýüzbe-ýüz bolsaňyz, öňki garaşlylyk wersiýalaryny (global we ýerli) aýyryň. Soňra täzeden işlediň npm install.