in English

Gurallary gurmak

Resminamalarymyzy gurmak, deslapky kody düzmek, synaglary işletmek we başgalar üçin Bootstrap-yň goşulan npm skriptlerini nähili ulanmalydygyny öwreniň.

Bu sahypada

Gural gurmak

“ Bootstrap ” gurmak ulgamy üçin npm skriptlerini ulanýar. Package.json , çarçuwa bilen işlemek üçin amatly usullary, şol sanda kod düzmek, synag synaglary we ş.m. öz içine alýar .

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.