Інструменты зборкі
Даведайцеся, як выкарыстоўваць уключаныя ў Bootstrap сцэнары npm для стварэння нашай дакументацыі, кампіляцыі зыходнага кода, выканання тэстаў і шмат іншага.
Наладка аснасткі
Bootstrap выкарыстоўвае скрыпты npm для сваёй сістэмы зборкі. Наш package.json уключае зручныя метады працы з фрэймворкам, уключаючы кампіляцыю кода, запуск тэстаў і многае іншае.
Каб выкарыстоўваць нашу сістэму зборкі і запускаць нашу дакументацыю лакальна, вам спатрэбіцца копія зыходных файлаў Bootstrap і Node. Выканайце наступныя крокі, і вы павінны быць гатовыя да рок:
- Спампуйце і ўсталюйце Node.js , які мы выкарыстоўваем для кіравання нашымі залежнасцямі.
- Альбо спампуйце зыходныя коды Bootstrap, альбо аддзяліце рэпазітар Bootstrap .
- Перайдзіце ў каранёвы
/bootstrap
каталог і запусціцеnpm install
, каб усталяваць нашы лакальныя залежнасці, пералічаныя ў package.json .
Пасля завяршэння вы зможаце запускаць розныя каманды з каманднага радка.
Выкарыстанне скрыптоў 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.
Сас
Bootstrap v4 выкарыстоўвае Node Sass для кампіляцыі нашых зыходных файлаў Sass у файлы CSS (уключаныя ў працэс зборкі). Каб пры кампіляцыі Sass з выкарыстаннем вашага ўласнага канвеера актываў атрымаць той жа згенераваны CSS, вам трэба будзе выкарыстоўваць кампілятар Sass, які падтрымлівае як мінімум тыя функцыі, што і Node Sass. Гэта важна адзначыць, таму што з 26 кастрычніка 2020 г. LibSass і пакеты, створаныя на яго аснове, у тым ліку Node Sass, састарэлі .
Калі вам патрэбны новыя функцыі Sass або сумяшчальнасць з новымі стандартамі CSS, Dart Sass цяпер з'яўляецца асноўнай рэалізацыяй Sass і падтрымлівае JavaScript API, які цалкам сумяшчальны з Node Sass (за некаторымі выключэннямі, пералічанымі на старонцы GitHub Dart Sass ).
Мы павялічваем дакладнасць акруглення Sass да 6 (па змаўчанні гэта 5 у Node Sass), каб прадухіліць праблемы з акругленнем у браўзеры. Калі вы выкарыстоўваеце Dart Sass, вам не трэба будзе наладжваць гэта, бо гэты кампілятар выкарыстоўвае дакладнасць акруглення 10 і з меркаванняў эфектыўнасці не дазваляе яе наладжваць.
Аўтапрэфікс
Bootstrap выкарыстоўвае Autoprefixer (уключаны ў наш працэс зборкі), каб аўтаматычна дадаваць прэфіксы пастаўшчыка да некаторых уласцівасцей CSS падчас зборкі. Гэта дазваляе зэканоміць наш час і код, дазваляючы напісаць ключавыя часткі нашага CSS за адзін раз, пазбаўляючы пры гэтым патрэбы ў міксінах пастаўшчыка, падобных да тых, што ёсць у v3.
Мы захоўваем спіс браўзераў, якія падтрымліваюцца праз Autoprefixer, у асобным файле ў нашым рэпазітары GitHub. Падрабязнасці глядзіце ў .browserslistrc .
Мясцовая дакументацыя
Запуск нашай дакументацыі лакальна патрабуе выкарыстання Hugo, які ўсталёўваецца праз пакет hugo-bin npm. Hugo - гэта надзвычай хуткі і даволі пашыраны генератар статычных сайтаў, які дае нам: асноўныя ўключэнні, файлы на аснове Markdown, шаблоны і многае іншае. Вось як гэта пачаць:
- Каб усталяваць усе залежнасці , выканайце наладку інструментаў вышэй.
- З каранёвага
/bootstrap
каталога запусціцеnpm run docs-serve
ў камандным радку. - Адкрыйце
http://localhost:9001/
ў браўзеры і вуаля.
Даведайцеся больш аб выкарыстанні Hugo, прачытаўшы яго дакументацыю .
Ліквідацыю непаладак
Калі ў вас узнікнуць праблемы з усталяваннем залежнасцей, выдаліце ўсе папярэднія версіі залежнасцей (глабальныя і лакальныя). Потым запусціце паўторна npm install
.