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

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

Бұл бетте

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

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

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

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

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

npm сценарийлерін пайдалану

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

Тапсырма	Сипаттама
`npm start`	CSS және JavaScript құрастырады, құжаттаманы құрастырады және жергілікті серверді іске қосады.
`npm run dist`	`dist/`Компиляцияланған файлдармен каталог жасайды . Sass , Autoprefixer және terser қажет .
`npm test`	Сынақтарды іске қосқаннан кейін жергілікті түрде жүргізеді`npm run dist`
`npm run docs-serve`	Құжаттаманы жергілікті түрде жасайды және іске қосады.

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

Сасс

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

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

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

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

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

RTLCSS

Bootstrap құрастырылған CSS өңдеу және оларды RTL түрлендіру үшін RTLCSSpadding-left пайдаланады – негізінен көлденең бағытты білу сипаттарын (мысалы, ) олардың қарама-қарсысымен ауыстырады. Ол бізге CSS-ті бір рет жазуға және RTLCSS басқару және мән директивалары арқылы шағын түзетулер жасауға мүмкіндік береді.

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

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

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

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

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

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