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 ва Icons Bootstrap-ро дар бар мегирад.

Сасс

Bootstrap v4 Node Sass -ро барои тартиб додани файлҳои сарчашмаи Sass ба файлҳои CSS истифода мебарад (ба раванди сохтани мо дохил карда шудааст). Барои анҷом додани як CSS-и тавлидшуда ҳангоми тартиб додани Sass бо истифода аз лӯлаи дороиҳои худ, шумо бояд компилятори Sass-ро истифода баред, ки ҳадди аққал хусусиятҳоеро, ки Node Sass мекунад, дастгирӣ кунад. Инро қайд кардан муҳим аст, зеро аз 26 октябри соли 2020, LibSass ва бастаҳои дар болои он сохташуда, аз ҷумла Node Sass, бекор карда шудаанд .

Агар ба шумо хусусиятҳои навтари Sass ё мутобиқат бо стандартҳои нави CSS ниёз дошта бошед, Dart Sass ҳоло татбиқи асосии Sass мебошад ва API-и JavaScript-ро дастгирӣ мекунад, ки бо Node Sass комилан мувофиқ аст (ба истиснои чанд истисно дар саҳифаи GitHub Dart Sass номбар шудааст ).

Мо дақиқии яклухткунии Sass-ро то 6 зиёд мекунем (бо нобаёнӣ, он дар Node Sass 5 аст) барои пешгирӣ кардани мушкилот бо яклухткунии браузер. Агар шумо Dart Sass-ро истифода баред, ин чизест, ки ба шумо лозим нест, ки танзим кунед, зеро он компилятор дақиқии яклухткунии 10-ро истифода мебарад ва бо сабабҳои самаранокӣ имкон намедиҳад, ки он танзим карда шавад.

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

Bootstrap Autoprefixer-ро (ба раванди сохтани мо дохил карда шудааст) барои ба таври худкор илова кардани префиксҳои фурӯшанда ба баъзе хосиятҳои CSS дар вақти сохтан истифода мебарад. Ин ба мо вақт ва кодро сарфа мекунад ва ба мо имкон медиҳад, ки қисмҳои калидии CSS-и худро як маротиба нависем ва ниёз ба омехтаҳои фурӯшандаро ба мисли миксинҳои дар v3 пайдошуда аз байн бардорем.

Мо рӯйхати браузерҳоеро, ки тавассути Autoprefixer дастгирӣ мешаванд, дар як файли алоҳида дар дохили анбори GitHub нигоҳ медорем. Барои тафсилот ба .browserslistrc нигаред.

Ҳуҷҷатҳои маҳаллӣ

Иҷрои ҳуҷҷатҳои мо ба таври маҳаллӣ истифодаи Hugo-ро талаб мекунад, ки тавассути бастаи hugo -bin npm насб карда мешавад. Ҳуго як генератори зуд ва хеле васеъшавандаи сайти статикӣ мебошад, ки ба мо пешниҳод мекунад: дар бар мегирад, файлҳои асоси Markdown, қолибҳо ва ғайра. Ин аст, ки чӣ тавр онро оғоз кунед:

  1. Барои насб кардани ҳама вобастагӣ аз танзимоти асбобҳои боло иҷро кунед .
  2. /bootstrapАз директорияи решавӣ , npm run docs-serveдар сатри фармон иҷро кунед.
  3. http://localhost:9001/Дар браузери худ кушоед ва voilà .

Дар бораи истифодаи Ҳуго бо хондани ҳуҷҷатҳои он маълумоти бештар гиред .

Мушкилкушо

Агар шумо ҳангоми насб кардани вобастагӣ ба мушкилот дучор шавед, ҳама версияҳои қаблии вобастагӣ (глобалӣ ва маҳаллӣ) хориҷ кунед. Сипас, такрор npm installкунед.