in English

Կառուցեք գործիքներ

Իմացեք, թե ինչպես օգտագործել Bootstrap-ի ընդգրկված npm սկրիպտները՝ մեր փաստաթղթերը ստեղծելու, սկզբնաղբյուրը կազմելու, թեստերն իրականացնելու և այլնի համար:

Գործիքների տեղադրում

Bootstrap-ն օգտագործում է npm սկրիպտներ իր կառուցման համակարգի համար: Մեր package.json- ը ներառում է շրջանակի հետ աշխատելու հարմար մեթոդներ, այդ թվում՝ կոդ կազմելը, թեստերը և այլն:

Մեր կառուցման համակարգը օգտագործելու և մեր փաստաթղթերը տեղում գործարկելու համար ձեզ հարկավոր է Bootstrap-ի սկզբնաղբյուր ֆայլերի և Node-ի պատճենը: Հետևեք այս քայլերին և պետք է պատրաստ լինեք ռոքի.

  1. Ներբեռնեք և տեղադրեք Node.js- ը, որը մենք օգտագործում ենք մեր կախվածությունները կառավարելու համար:
  2. Կամ ներբեռնեք Bootstrap-ի աղբյուրները կամ ներբեռնեք Bootstrap- ի պահոցը :
  3. Նավարկեք դեպի արմատային /bootstrapգրացուցակ և գործարկեք npm install՝ տեղադրելու մեր տեղական կախվածությունները, որոնք նշված են package.json- ում :

Ավարտելուց հետո դուք կկարողանաք գործարկել հրամանի տողից տրամադրված տարբեր հրամաններ:

Օգտագործելով npm սցենարներ

Մեր package.json- ը ներառում է հետևյալ հրամաններն ու առաջադրանքները.

Առաջադրանք Նկարագրություն
npm run dist npm run distստեղծում է /dist/գրացուցակը կազմված ֆայլերով: Օգտագործում է Sass , Autoprefixer և Terser :
npm test Վազքից հետո թեստեր է անցկացնում տեղումnpm run dist
npm run docs-serve Ստեղծում և վարում է փաստաթղթերը տեղում:

Գործարկեք npm run՝ տեսնելու բոլոր npm սցենարները:

Սկսեք Bootstrap-ով npm-ի միջոցով մեր մեկնարկային նախագծով: Գնացեք twbs/bootstrap-npm-starter ձևանմուշների պահոց՝ տեսնելու, թե ինչպես կառուցել և հարմարեցնել Bootstrap-ը ձեր սեփական npm նախագծում: Ներառում է Sass կոմպիլյատոր, Autoprefixer, Stylelint, PurgeCSS և Bootstrap պատկերակներ:

Սաս

Bootstrap v4-ն օգտագործում է Node Sass- ը մեր Sass աղբյուրի ֆայլերը CSS ֆայլերում (ներառված են մեր կառուցման գործընթացում) կազմելու համար: Որպեսզի ձեր սեփական ակտիվների խողովակաշարով Sass-ը կազմելիս հայտնվեք նույն գեներացված CSS-ով, դուք պետք է օգտագործեք Sass կոմպիլյատոր, որն աջակցում է առնվազն այն հնարավորություններին, որոնք անում է Node Sass-ը: Սա կարևոր է նշել, քանի որ 2020 թվականի հոկտեմբերի 26-ից LibSass-ը և դրա վրա կառուցված փաթեթները, ներառյալ Node Sass-ը, հնացած են :

Եթե ​​Ձեզ անհրաժեշտ է Sass-ի ավելի նոր հնարավորություններ կամ համատեղելիություն ավելի նոր CSS ստանդարտների հետ, Dart Sass- ն այժմ Sass-ի առաջնային ներդրումն է և աջակցում է JavaScript API-ն, որը լիովին համատեղելի է Node Sass-ի հետ (մի քանի բացառություններով, որոնք նշված են Dart Sass-ի GitHub էջում ):

Մենք Sass-ի կլորացման ճշգրտությունը բարձրացնում ենք մինչև 6-ի (կանխադրված՝ Node Sass-ում այն ​​5 է)՝ զննարկչի կլորացման հետ կապված խնդիրները կանխելու համար: Եթե ​​դուք օգտագործում եք Dart Sass-ը, սա հարմարեցնելու կարիք չի լինի, քանի որ այդ կոմպիլյատորն օգտագործում է 10-ի կլորացման ճշգրտությունը և արդյունավետության նկատառումներով թույլ չի տալիս այն կարգավորել:

Ավտոնախդիր

Bootstrap-ն օգտագործում է Autoprefixer (ներառված է մեր կառուցման գործընթացում)՝ կառուցման պահին վաճառողի նախածանցները որոշ CSS հատկություններին ավտոմատ կերպով ավելացնելու համար: Այդպես վարվելը խնայում է մեզ ժամանակ և կոդը՝ թույլ տալով մեզ մեկ անգամ գրել մեր CSS-ի հիմնական մասերը՝ միաժամանակ վերացնելով վաճառողների միքսների կարիքը, ինչպիսին են v3-ում:

Մենք պահպանում ենք Autoprefixer-ի միջոցով աջակցվող բրաուզերների ցանկը առանձին ֆայլում մեր GitHub պահեստում: Մանրամասների համար տե՛ս .browserslistrc :

Տեղական փաստաթղթեր

Մեր փաստաթղթերը տեղական գործարկելու համար պահանջվում է Hugo-ի օգտագործումը, որը տեղադրվում է hugo-bin npm փաթեթի միջոցով: Hugo-ն ահավոր արագ և բավականին ընդարձակվող ստատիկ կայքերի գեներատոր է, որը մեզ տրամադրում է հիմնական ընդգրկումներ, Markdown-ի վրա հիմնված ֆայլեր, ձևանմուշներ և այլն: Ահա թե ինչպես սկսել այն.

  1. Անցեք վերը նշված գործիքակազմի կարգավորումը ՝ բոլոր կախվածությունները տեղադրելու համար:
  2. Արմատային /bootstrapգրացուցակից գործարկեք npm run docs-serveհրամանի տողում:
  3. Բացեք http://localhost:9001/ձեր բրաուզերում և voilà:

Իմացեք ավելին Hugo-ի օգտագործման մասին՝ կարդալով դրա փաստաթղթերը :

Անսարքությունների վերացում

Եթե ​​կախվածության տեղադրման հետ կապված խնդիրների հանդիպեք, ապատեղադրեք կախվածության բոլոր նախորդ տարբերակները (գլոբալ և տեղական): Այնուհետև կրկնել npm install: