in English

Інструменты зборкі

Даведайцеся, як выкарыстоўваць уключаныя ў Bootstrap сцэнары npm для стварэння нашай дакументацыі, кампіляцыі зыходнага кода, выканання тэстаў і шмат іншага.

На гэтай старонцы

Наладка аснасткі

Bootstrap выкарыстоўвае скрыпты npm для сваёй сістэмы зборкі. Наш package.json уключае зручныя метады працы з фрэймворкам, уключаючы кампіляцыю кода, запуск тэстаў і многае іншае.

Каб выкарыстоўваць нашу сістэму зборкі і запускаць нашу дакументацыю лакальна, вам спатрэбіцца копія зыходных файлаў Bootstrap і Node. Выканайце наступныя крокі, і вы павінны быць гатовыя да рок:

Спампуйце і ўсталюйце Node.js , які мы выкарыстоўваем для кіравання нашымі залежнасцямі.
Альбо спампуйце зыходныя коды Bootstrap, альбо аддзяліце рэпазітар Bootstrap .
Перайдзіце ў каранёвы /bootstrapкаталог і запусціце npm install, каб усталяваць нашы лакальныя залежнасці, пералічаныя ў package.json .

Пасля завяршэння вы зможаце запускаць розныя каманды з каманднага радка.

Выкарыстанне скрыптоў 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`	Стварае і запускае дакументацыю лакальна.

Пачніце працу з Bootstrap праз npm з дапамогай нашага стартавага праекта! Перайдзіце ў сховішча шаблонаў twbs /bootstrap-npm-starter , каб даведацца, як стварыць і наладзіць Bootstrap у вашым уласным праекце npm. Уключае кампілятар Sass, Autoprefixer, Stylelint, PurgeCSS і значкі Bootstrap.

Сас

Bootstrap выкарыстоўвае Dart Sass для кампіляцыі нашых зыходных файлаў Sass у файлы CSS (уключаныя ў наш працэс зборкі), і мы рэкамендуем вам зрабіць тое ж самае, калі вы кампілюеце Sass з дапамогай уласнага канвеера актываў. Раней мы выкарыстоўвалі Node Sass для Bootstrap v4, але LibSass і пакеты, створаныя на яго аснове, у тым ліку Node Sass, цяпер састарэлі .

Dart Sass выкарыстоўвае дакладнасць акруглення 10 і з меркаванняў эфектыўнасці не дазваляе карэктаваць гэта значэнне. Мы не зніжаем гэтую дакладнасць падчас далейшай апрацоўкі створанага намі CSS, напрыклад падчас мініфікацыі, але калі вы вырашыце зрабіць гэта, мы рэкамендуем падтрымліваць дакладнасць не менш за 6, каб прадухіліць праблемы з акругленнем у браўзеры.

Аўтапрэфікс

Bootstrap выкарыстоўвае Autoprefixer (уключаны ў наш працэс зборкі), каб аўтаматычна дадаваць прэфіксы пастаўшчыка да некаторых уласцівасцей CSS падчас зборкі. Гэта дазваляе зэканоміць наш час і код, дазваляючы напісаць ключавыя часткі нашага CSS за адзін раз, пазбаўляючы пры гэтым патрэбы ў міксінах пастаўшчыка, падобных да тых, што ёсць у v3.

Мы захоўваем спіс браўзераў, якія падтрымліваюцца праз Autoprefixer, у асобным файле ў нашым рэпазітары GitHub. Падрабязнасці глядзіце ў .browserslistrc .

RTLCSS

Bootstrap выкарыстоўвае RTLCSS для апрацоўкі скампіляваных CSS і пераўтварэння іх у RTL - у асноўным замяняючы ўласцівасці, якія ведаюць гарызантальны кірунак (напрыклад, padding-left) іх супрацьлеглымі. Гэта дазваляе нам напісаць наш CSS толькі адзін раз і ўнесці нязначныя змены з дапамогай дырэктываў кіравання і значэнняў RTLCSS .

Мясцовая дакументацыя

Запуск нашай дакументацыі лакальна патрабуе выкарыстання Hugo, які ўсталёўваецца праз пакет hugo-bin npm. Hugo - гэта надзвычай хуткі і даволі пашыраны генератар статычных сайтаў, які дае нам: асноўныя ўключэнні, файлы на аснове Markdown, шаблоны і многае іншае. Вось як гэта пачаць:

Каб усталяваць усе залежнасці , выканайце наладку інструментаў вышэй.
З каранёвага /bootstrapкаталога запусціце npm run docs-serveў камандным радку.
Адкрыйце http://localhost:9001/ў браўзеры і вуаля.

Даведайцеся больш аб выкарыстанні Hugo, прачытаўшы яго дакументацыю .

Ліквідацыю непаладак

Калі ў вас узнікнуць праблемы з усталяваннем залежнасцей, выдаліце ўсе папярэднія версіі залежнасцей (глабальныя і лакальныя). Потым запусціце паўторна npm install.