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.

Asboblarni sozlash

Bootstrap o'zining qurish tizimi uchun npm skriptlaridan foydalanadi. Bizning package.json ramka bilan ishlash uchun qulay usullarni, jumladan kodni kompilyatsiya qilish, testlarni ishga tushirish va boshqalarni o'z ichiga oladi.

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:

  1. Node.js ni yuklab oling va o'rnating , biz bog'liqliklarimizni boshqarish uchun foydalanamiz.
  2. Yoki Bootstrap manbalarini yuklab oling yoki Bootstrap omborini vilkalang .
  3. 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 quyidagi buyruqlar va vazifalarni o'z ichiga oladi:

Vazifa Tavsif
npm run dist npm run dist/dist/kompilyatsiya qilingan fayllar bilan katalog yaratadi . Sass , Autoprefixer va terserdan foydalanadi .
npm test Ishlagandan so'ng mahalliy testlarni o'tkazadinpm run dist
npm run docs-serve Hujjatlarni mahalliy darajada tuzadi va ishga tushiradi.

npm runBarcha npm skriptlarini ko'rish uchun ishga tushiring .

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 v4 bizning Sass manba fayllarimizni CSS fayllariga (qurilish jarayoniga kiritilgan) kompilyatsiya qilish uchun Node Sass -dan foydalanadi. Sass-ni o'z aktivlar quvur liniyasidan foydalangan holda kompilyatsiya qilishda bir xil yaratilgan CSS-ga ega bo'lish uchun siz hech bo'lmaganda Node Sass funksiyalarini qo'llab-quvvatlaydigan Sass kompilyatoridan foydalanishingiz kerak bo'ladi. Buni ta’kidlash muhim, chunki 2020-yil 26-oktabr holatiga ko‘ra LibSass va uning ustiga qurilgan paketlar, jumladan Node Sass ham eskirgan .

Agar sizga yangi Sass funksiyalari yoki yangi CSS standartlari bilan muvofiqligi kerak bo‘lsa, Dart Sass endi Sassning asosiy ilovasi bo‘lib, Node Sass bilan to‘liq mos keluvchi JavaScript API-ni qo‘llab-quvvatlaydi (Dart Sassning GitHub sahifasida keltirilgan bir nechta istisnolardan tashqari ).

Brauzerni yaxlitlash bilan bog'liq muammolarni oldini olish uchun biz Sass yaxlitlash aniqligini 6 ga oshiramiz (sukut bo'yicha, Node Sassda bu 5 ga teng). Agar siz Dart Sass-dan foydalansangiz, buni sozlashingiz kerak bo'lmaydi, chunki bu kompilyator 10 yaxlitlash aniqligini ishlatadi va samaradorlik sababli uni sozlashga ruxsat bermaydi.

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 ehtiyojni yo'qotadi.

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

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:

  1. Barcha bog'liqliklarni o'rnatish uchun yuqoridagi asboblarni sozlash orqali ishga tushiring .
  2. Ildiz /bootstrapkatalogidan npm run docs-servebuyruq satrida ishga tushiring.
  3. 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.