in English

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

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

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

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

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

  1. Спампуйце і ўсталюйце Node.js , які мы выкарыстоўваем для кіравання нашымі залежнасцямі.
  2. Альбо спампуйце зыходныя коды Bootstrap, альбо аддзяліце рэпазітар Bootstrap .
  3. Перайдзіце ў каранёвы /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 праз npm з дапамогай нашага стартавага праекта! Перайдзіце ў сховішча шаблонаў twbs /bootstrap-npm-starter , каб даведацца, як стварыць і наладзіць Bootstrap у вашым уласным праекце npm. Уключае кампілятар Sass, Autoprefixer, Stylelint, PurgeCSS і значкі Bootstrap.

Сас

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, шаблоны і многае іншае. Вось як гэта пачаць:

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

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

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

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