Кораллар төзү
Документация төзү, чыганак коды туплау, тестлар үткәрү һәм башкалар өчен Bootstrap кертелгән npm скриптларын ничек кулланырга өйрәнегез.
Кораллау
Bootstrap үзенең төзү системасы өчен npm сценарийларын куллана. Безнең package.json рамка белән эшләү өчен уңайлы ысулларны үз эченә ала, шул исәптән код туплау, тестлар һәм башкалар.
Безнең төзү системасын куллану һәм документларыбызны җирле итеп башкару өчен, сезгә Bootstrap чыганак файллары һәм Node күчермәсе кирәк. Бу адымнарны үтәгез һәм сез ташларга әзер булырга тиеш:
- Node.js-ны йөкләү һәм урнаштыру , без үзебезнең бәйләнешләр белән идарә итү өчен кулланабыз.
- Яисә Bootstrap чыганакларын йөкләгез, яисә Bootstrap складларын урнаштырыгыз .
/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 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 пакеты аша урнаштырылган. Уго - безне тәэмин итүче бик тиз һәм киңәйтелгән статик сайт генераторы: төп үз эченә Маркдаунга нигезләнгән файллар, шаблоннар һ.б. Менә аны ничек башларга:
- Барлык бәйләнешләрне урнаштыру өчен, өстә коралландыру көйләнеше аша йөгерегез .
- Тамыр
/bootstrap
каталогыннан,npm run docs-serve
командование сызыгында эшләгез. http://localhost:9001/
Браузерыгызда ачыгыз , һәм voilà.
Уго куллану турында аның документларын укып, күбрәк белү .
Төзексезлекләрне Эзләү
Бәйләнеш урнаштыру проблемалары белән очрашырга туры килсә, барлык бәйләнеш версияләрен (глобаль һәм җирле) бетерегез. Аннары, яңадан эшләгез npm install
.