in English

Құралдар құрастыру

Құжаттаманы құру, бастапқы кодты құрастыру, сынақтарды іске қосу және т.б. үшін Bootstrap қосылған npm сценарийлерін қалай пайдалану керектігін біліңіз.

Құралдарды орнату

Bootstrap құрастыру жүйесі үшін npm сценарийлерін пайдаланады. Біздің package.json құрылыммен жұмыс істеуге ыңғайлы әдістерді қамтиды, соның ішінде кодты құрастыру, сынақтарды орындау және т.б.

Құрастыру жүйесін пайдалану және құжаттаманы жергілікті түрде іске қосу үшін сізге Bootstrap бастапқы файлдарының және Түйіннің көшірмесі қажет. Мына қадамдарды орындаңыз және сіз шайқауға дайын болуыңыз керек:

  1. Node.js жүктеп алыңыз және орнатыңыз , біз оны тәуелділіктерімізді басқару үшін қолданамыз.
  2. Bootstrap көздерін жүктеп алыңыз немесе Bootstrap репозиторийін ашыңыз .
  3. Түбірлік /bootstrapкаталогқа өтіп, package.jsonnpm install ішінде тізімделген жергілікті тәуелділіктерімізді орнату үшін іске қосыңыз .

Аяқтағаннан кейін пәрмен жолынан берілген әртүрлі пәрмендерді іске қоса аласыз.

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 сценарийлерін көру үшін іске қосыңыз .

Бастапқы жобамызбен npm арқылы Bootstrap қолданбасын бастаңыз! Жеке npm жобаңызда Bootstrap құру және теңшеу жолын көру үшін twbs /bootstrap-npm-starter үлгі репозиторийіне өтіңіз. Sass компиляторы, автопрефиксер, Stylelint, PurgeCSS және Bootstrap белгішелері кіреді.

Сасс

Bootstrap v4 Sass бастапқы файлдарын CSS файлдарына (құрастыру процесіне кіреді) құрастыру үшін Node Sass пайдаланады. Жеке актив құбырын пайдаланып Sass құрастырған кезде бірдей жасалған CSS-ті аяқтау үшін кем дегенде Node Sass жасайтын мүмкіндіктерді қолдайтын Sass компиляторын пайдалану қажет. Мұны ескеру маңызды, өйткені 2020 жылдың 26 ​​қазанынан бастап LibSass және оның үстіне салынған пакеттер, соның ішінде Node Sass — ескірген .

Егер сізге жаңарақ Sass мүмкіндіктері немесе жаңарақ CSS стандарттарымен үйлесімділік қажет болса, Dart Sass енді Sass қолданбасының негізгі нұсқасы болып табылады және Node Sass-пен толық үйлесімді JavaScript API интерфейсін қолдайды (Dart Sass GitHub бетінде тізімделген бірнеше ерекшеліктермен ).

Браузерді дөңгелектеуге қатысты мәселелерді болдырмау үшін Sass дөңгелектеу дәлдігін 6-ға дейін арттырамыз (әдепкі бойынша, Node Sass жүйесінде ол 5). Dart Sass пайдалансаңыз, бұл сізге реттеу қажет нәрсе болмайды, өйткені бұл компилятор дөңгелектеу дәлдігін 10 пайдаланады және тиімділік себептері бойынша оны реттеуге мүмкіндік бермейді.

Автопрефиксер

Bootstrap құрастыру уақытында кейбір CSS сипаттарына жеткізуші префикстерін автоматты түрде қосу үшін Autoprefixer (құру процесіне кіреді) пайдаланады. Бұл бізге CSS-тің негізгі бөліктерін бір рет жазуға мүмкіндік беру арқылы уақыт пен кодты үнемдейді, сонымен бірге v3-де табылған жеткізушілер миксиндерінің қажеттілігін болдырмайды.

Autoprefixer арқылы қолдау көрсетілетін шолғыштардың тізімін GitHub репозиторийінде бөлек файлда сақтаймыз. Мәліметтерді .browserlistrc қараңыз.

Жергілікті құжаттама

Құжаттаманы жергілікті түрде іске қосу hugo-bin npm бумасы арқылы орнатылатын Hugo бағдарламасын пайдалануды талап етеді . Hugo - бұл бізге қамтамасыз ететін өте жылдам және өте кеңейтілетін статикалық сайт генераторы: негізгі қамтиды, Markdown негізіндегі файлдар, үлгілер және т.б. Оны қалай бастау керек:

  1. Барлық тәуелділіктерді орнату үшін жоғарыдағы құралдарды орнату арқылы іске қосыңыз .
  2. Түбірлік /bootstrapкаталогтан npm run docs-serveпәрмен жолында іске қосыңыз.
  3. http://localhost:9001/Браузеріңізде ашыңыз және voilà.

Құжаттарын оқу арқылы Hugo пайдалану туралы көбірек біліңіз .

Ақаулық себебін іздеу және түзету

Тәуелділіктерді орнату кезінде қиындықтар туындаса, барлық алдыңғы тәуелділік нұсқаларын (жаһандық және жергілікті) жойыңыз. Содан кейін қайта іске қосыңыз npm install.