Կառուցեք գործիքներ
Իմացեք, թե ինչպես օգտագործել Bootstrap-ի ընդգրկված npm սկրիպտները՝ մեր փաստաթղթերը ստեղծելու, սկզբնաղբյուրը կազմելու, թեստերն իրականացնելու և այլնի համար:
Գործիքների տեղադրում
Bootstrap-ն օգտագործում է npm սկրիպտներ իր կառուցման համակարգի համար: Մեր package.json- ը ներառում է շրջանակի հետ աշխատելու հարմար մեթոդներ, այդ թվում՝ կոդ կազմելը, թեստերը և այլն:
Մեր կառուցման համակարգը օգտագործելու և մեր փաստաթղթերը տեղում գործարկելու համար ձեզ հարկավոր է Bootstrap-ի սկզբնաղբյուր ֆայլերի և Node-ի պատճենը: Հետևեք այս քայլերին և պետք է պատրաստ լինեք ռոքի.
- Ներբեռնեք և տեղադրեք Node.js- ը, որը մենք օգտագործում ենք մեր կախվածությունները կառավարելու համար:
- Կամ ներբեռնեք Bootstrap-ի աղբյուրները կամ ներբեռնեք Bootstrap- ի պահոցը :
- Նավարկեք դեպի արմատային
/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 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-ի վրա հիմնված ֆայլեր, ձևանմուշներ և այլն: Ահա թե ինչպես սկսել այն.
- Անցեք վերը նշված գործիքակազմի կարգավորումը ՝ բոլոր կախվածությունները տեղադրելու համար:
- Արմատային
/bootstrap
գրացուցակից գործարկեքnpm run docs-serve
հրամանի տողում: - Բացեք
http://localhost:9001/
ձեր բրաուզերում և voilà:
Իմացեք ավելին Hugo-ի օգտագործման մասին՝ կարդալով դրա փաստաթղթերը :
Անսարքությունների վերացում
Եթե կախվածության տեղադրման հետ կապված խնդիրների հանդիպեք, ապատեղադրեք կախվածության բոլոր նախորդ տարբերակները (գլոբալ և տեղական): Այնուհետև կրկնել npm install
: