in English

Кораллар төзү

Документация төзү, чыганак коды туплау, тестлар үткәрү һәм башкалар өчен Bootstrap кертелгән npm скриптларын ничек кулланырга өйрәнегез.

Кораллау

Bootstrap үзенең төзү системасы өчен npm сценарийларын куллана. Безнең package.json рамка белән эшләү өчен уңайлы ысулларны үз эченә ала, шул исәптән код туплау, тестлар һәм башкалар.

Безнең төзү системасын куллану һәм документларыбызны җирле итеп башкару өчен, сезгә Bootstrap чыганак файллары һәм Node күчермәсе кирәк. Бу адымнарны үтәгез һәм сез ташларга әзер булырга тиеш:

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

Тәмамлангач, сез командалар сызыгыннан бирелгән төрле командаларны эшли алырсыз.

Npm сценарийларын куллану

Безнең package.json түбәндәге боерыкларны һәм биремнәрне үз эченә ала:

Бирем Тасвирлау
npm run dist npm run dist/dist/тупланган файллар белән каталог ясый . Сасс , Автопрефиксер һәм терсер куллана .
npm test Йөгергәннән соң җирле сынаулар үткәрәnpm run dist
npm run docs-serve Документацияне җирле итеп төзи һәм эшли.

npm runБарлык npm сценарийларын карау өчен йөгерегез .

Bootstrap белән npm аша безнең стартер проект белән башлап җибәрегез! Bootstrap-ны үзегезнең npm проектында ничек төзергә һәм көйләргә икәнлеген карау өчен twbs / bootstrap-npm-стартер шаблон репозитариясенә керегез. Sass компиляциясе, Autoprefixer, Stylelint, PurgeCSS һәм Bootstrap иконалары керә.

Сасс

Bootstrap v4 безнең Sass чыганак файлларын CSS файлларына туплау өчен Node Sass куллана (безнең төзү процессына кертелгән). Assзегезнең актив торбагызны кулланып Sass-ны туплаганда, шул ук җитештерелгән CSS белән тәмамлану өчен, сезгә Sass компилярын кулланырга кирәк, ким дигәндә Node Sass кебек функцияләрне хуплый. Моны әйтергә кирәк, чөнки 2020 елның 26 ​​октябренә LibSass һәм аның өстендә төзелгән пакетлар, шул исәптән Node Sass - искергән .

Әгәр дә сез яңа Sass функцияләрен яки яңа CSS стандартларына туры килүне таләп итәсез икән, Dart Sass хәзер Sassның төп кулланылышы булып тора һәм Node Sass белән тулысынча туры килә торган JavaScript API ярдәм итә (Dart Sass's GitHub битендә күрсәтелгән берничә очрак белән ).

Браузерны әйләндерү белән бәйле проблемаларны булдырмас өчен, без Sass түгәрәк төгәллеген 6га кадәр арттырабыз (килешү буенча, ул Node Sass'та 5). Әгәр сез Dart Sass куллансагыз, бу сезгә көйләнергә тиеш түгел, чөнки компиляр 10 түгәрәк төгәллекне куллана һәм эффективлык сәбәпле аны көйләргә рөхсәт итми.

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

Bootstrap Autoprefixer куллана (безнең төзү процессына кертелгән) төзү вакытында кайбер CSS үзлекләренә сатучы префиксларын автоматик рәвештә өстәргә. Моны эшләү безгә CSS-ның төп өлешләрен бер тапкыр язарга рөхсәт итеп, вакытны һәм кодны саклый, шул ук вакытта v3 тапкан кебек сатучы миксиннар ихтыяҗын бетерә.

Автопрефиксер ярдәмендә кулланылган браузерлар исемлеген безнең GitHub складында аерым файлда саклыйбыз. Детальләр өчен .browserslistrc карагыз .

Localирле документлар

Документацияне җирле итеп эшләтеп җибәрү Hugo-ны куллануны таләп итә, ул hugo-bin npm пакеты аша урнаштырылган. Уго - безне тәэмин итүче бик тиз һәм киңәйтелгән статик сайт генераторы: төп үз эченә Маркдаунга нигезләнгән файллар, шаблоннар һ.б. Менә аны ничек башларга:

  1. Барлык бәйләнешләрне урнаштыру өчен, өстә коралландыру көйләнеше аша йөгерегез .
  2. Тамыр /bootstrapкаталогыннан, npm run docs-serveкомандование сызыгында эшләгез.
  3. http://localhost:9001/Браузерыгызда ачыгыз , һәм voilà.

Уго куллану турында аның документларын укып, күбрәк белү .

Төзексезлекләрне Эзләү

Бәйләнеш урнаштыру проблемалары белән очрашырга туры килсә, барлык бәйләнеш версияләрен (глобаль һәм җирле) бетерегез. Аннары, яңадан эшләгез npm install.