in English

Qurilish asboblari

Hujjatlarimizni yaratish, manba kodini kompilyatsiya qilish, testlarni ishga tushirish va boshqalar uchun Bootstrap-ga kiritilgan npm skriptlaridan qanday foydalanishni bilib oling.

Ushbu sahifada

Asboblarni sozlash

Bootstrap o'zining qurish tizimi uchun npm skriptlaridan foydalanadi. Bizning package.json tizimida freymvork bilan ishlash uchun qulay usullar, jumladan kodni kompilyatsiya qilish, testlarni bajarish va boshqalar mavjud.

Qurilish tizimimizdan foydalanish va hujjatlarimizni mahalliy sifatida ishga tushirish uchun sizga Bootstrap manba fayllari va Node.ning nusxasi kerak bo‘ladi. Quyidagi bosqichlarni bajaring va siz siltanishga tayyor bo'lishingiz kerak:

Node.js ni yuklab oling va o'rnating , biz bog'liqliklarimizni boshqarish uchun foydalanamiz.
Yoki Bootstrap manbalarini yuklab oling yoki Bootstrap omborini vilkalang .
Ildiz /bootstrapkatalogiga o'ting va package.jsonnpm install ro'yxatida keltirilgan mahalliy bog'liqliklarimizni o'rnatish uchun ishga tushiring .

Tugallangach, siz buyruq satridan taqdim etilgan turli buyruqlarni ishga tushirishingiz mumkin bo'ladi.

Npm skriptlaridan foydalanish

Bizning package.json loyihani ishlab chiqish uchun ko'plab vazifalarni o'z ichiga oladi. npm runTerminalingizdagi barcha npm skriptlarini ko'rish uchun ishga tushiring . Asosiy vazifalarga quyidagilar kiradi:

Vazifa	Tavsif
`npm start`	CSS va JavaScript-ni kompilyatsiya qiladi, hujjatlarni tuzadi va mahalliy serverni ishga tushiradi.
`npm run dist`	`dist/`Kompilyatsiya qilingan fayllar bilan katalog yaratadi . Sass , Autoprefixer va terser talab qilinadi .
`npm test`	Ishlagandan so'ng mahalliy testlarni o'tkazadi`npm run dist`
`npm run docs-serve`	Hujjatlarni mahalliy darajada tuzadi va ishga tushiradi.

Boshlang'ich loyihamiz bilan npm orqali Bootstrap-ni ishga tushiring! O'zingizning npm loyihangizda Bootstrap-ni qanday yaratish va sozlashni ko'rish uchun twbs/bootstrap-npm-starter shablonlari omboriga o'ting. Sass kompilyatori, Autoprefixer, Stylelint, PurgeCSS va Bootstrap piktogrammalarini o'z ichiga oladi.

Sass

Bootstrap Dart Sass -dan bizning Sass manba fayllarini CSS-fayllarga (bizning qurish jarayonimizga kiritilgan) kompilyatsiya qilish uchun foydalanadi va agar siz Sass-ni o'z aktivlaringiz quvur liniyasidan foydalangan holda kompilyatsiya qilsangiz, xuddi shunday qilishingizni tavsiya qilamiz. Biz ilgari Bootstrap v4 uchun Node Sass-dan foydalanganmiz, lekin LibSass va uning ustiga qurilgan paketlar, jumladan Node Sass endi eskirgan .

Dart Sass 10 yaxlitlash aniqligidan foydalanadi va samaradorlik sababli bu qiymatni sozlashga ruxsat bermaydi. Biz yaratgan CSS-ni keyingi qayta ishlash jarayonida, masalan, kichiklashtirish paytida bu aniqlikni pasaytirmaymiz, lekin agar shunday qilishni tanlasangiz, brauzerni yaxlitlash bilan bog'liq muammolarni oldini olish uchun kamida 6 aniqlikni saqlashni tavsiya etamiz.

Avtoprefiksator

Bootstrap yaratish vaqtida ba'zi CSS xususiyatlariga avtomatik ravishda sotuvchi prefikslarini qo'shish uchun Autoprefixer (bizning qurish jarayoniga kiritilgan) dan foydalanadi. Bu bizga CSS-ning asosiy qismlarini bir marta yozishga imkon berib, vaqt va kodni tejaydi, shu bilan birga v3 da topilganlar kabi sotuvchi miksinlariga ehtiyoj qolmaydi.

Biz Autoprefixer orqali qo'llab-quvvatlanadigan brauzerlar ro'yxatini GitHub omborimizdagi alohida faylda saqlaymiz. Tafsilotlar uchun .browserlistrc ga qarang .

RTLCSS

Bootstrap kompilyatsiya qilingan CSS-ni qayta ishlash va ularni RTL-ga aylantirish uchun RTLCSSpadding-left -dan foydalanadi - asosan gorizontal yo'nalishni bilish xususiyatlarini (masalan , ) ularning teskarisi bilan almashtiradi. Bu bizga CSS-ni faqat bir marta yozish va RTLCSS boshqaruvi va qiymat direktivalari yordamida kichik o'zgarishlar qilish imkonini beradi.

Mahalliy hujjatlar

Hujjatlarimizni mahalliy sifatida ishga tushirish hugo-bin npm paketi orqali o'rnatiladigan Hugo-dan foydalanishni talab qiladi . Hugo - bu juda tez va juda kengaytiriladigan statik sayt generatori bo'lib, u bizga: asosiy o'z ichiga, Markdown-ga asoslangan fayllar, andozalar va boshqalarni taqdim etadi. Buni qanday boshlash kerak:

Barcha bog'liqliklarni o'rnatish uchun yuqoridagi asboblarni sozlash orqali ishga tushiring .
Ildiz /bootstrapkatalogidan npm run docs-servebuyruq satrida ishga tushiring.
http://localhost:9001/Brauzeringizda oching va voilà.

Hugodan foydalanish haqida uning hujjatlarini o'qib chiqing .

Muammolarni bartaraf qilish; nosozliklarni TUZATISH

Agar bog'liqlikni o'rnatishda muammolarga duch kelsangiz, barcha oldingi qaramlik versiyalarini (global va mahalliy) o'chirib tashlang. Keyin, qayta ishga tushiring npm install.