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/эмхэтгэсэн файлуудтай лавлах үүсгэнэ . Sass , Autoprefixer , болон terser ашигладаг .
npm test Гүйлтийн дараа орон нутагт туршилт явуулнаnpm run dist
npm run docs-serve Баримт бичгийг дотооддоо бүтээж ажиллуулдаг.

npm runБүх npm скриптүүдийг харахын тулд ажиллуулна уу.

Манай эхлүүлэх төслийн тусламжтайгаар npm-ээр Bootstrap-ийг эхлүүлээрэй! twbs /bootstrap-npm-starter загварын агуулах руу орж өөрийн npm төсөл дээрээ Bootstrap-г хэрхэн бүтээх, өөрчлөх талаар харна уу. Sass хөрвүүлэгч, Autoprefixer, Stylelint, PurgeCSS болон Bootstrap Icons багтана.

Сасс

Bootstrap v4 нь манай Sass эх файлуудыг CSS файл болгон хөрвүүлэхийн тулд Node Sass ашигладаг (бидний бүтээх процесст багтсан). Өөрийн хөрөнгийн дамжуулах хоолойг ашиглан Sass-ийг хөрвүүлэхдээ ижил үүсгэсэн CSS-тэй болохын тулд та Node Sass-ийн хийдэг функцуудыг дэмждэг Sass хөрвүүлэгчийг ашиглах хэрэгтэй болно. 2020 оны 10-р сарын 26-ны байдлаар LibSass болон түүний дээр суурилуулсан багцууд, тухайлбал Node Sass-ыг ашиглахаа больсон тул үүнийг анхаарах нь чухал юм .

Хэрэв танд Sass-ийн шинэ функцууд эсвэл шинэ CSS стандартуудтай нийцэх шаардлагатай бол Dart Sass нь одоо Sass-ийн үндсэн хэрэглүүр болж, Node Sass-тай бүрэн нийцэх JavaScript API-г дэмждэг (Dart Sass-ийн GitHub хуудсанд жагсаасан цөөн хэдэн тохиолдлыг эс тооцвол ).

Хөтчийг бөөрөнхийлөхтэй холбоотой асуудлаас урьдчилан сэргийлэхийн тулд бид Sass-ийн бөөрөнхийлөх нарийвчлалыг 6 болгож (анхдагчаар Node Sass-д энэ нь 5 байна) нэмэгдүүлдэг. Хэрэв та Dart Sass ашигладаг бол энэ хөрвүүлэгч нь 10-ын дугуйралтын нарийвчлалыг ашигладаг бөгөөд үр ашгийн үүднээс үүнийг тохируулахыг зөвшөөрдөггүй тул үүнийг тохируулах шаардлагагүй болно.

Автоматаар тохируулагч

Bootstrap нь бүтээх үед зарим CSS шинж чанаруудад үйлдвэрлэгчийн угтварыг автоматаар нэмэхийн тулд Autoprefixer (бидний бүтээх процесст багтсан) ашигладаг. Үүнийг хийснээр бидэнд CSS-ийн гол хэсгүүдийг нэг удаа бичих боломжийг олгож, v3-д байдаг шиг нийлүүлэгчийн хольцын хэрэгцээг арилгаснаар бидэнд цаг хугацаа, кодыг хэмнэдэг.

Бид Autoprefixer-ээр дэмжигдсэн хөтчүүдийн жагсаалтыг GitHub репозиторын доторх тусдаа файлд хадгалдаг. Дэлгэрэнгүйг .browserlistrc -ээс үзнэ үү.

Орон нутгийн баримт бичиг

Манай баримт бичгийг дотооддоо ажиллуулахын тулд hugo-bin npm багцаар суулгасан Hugo-г ашиглах шаардлагатай. Хюго бол маш хурдан бөгөөд нэлээд өргөтгөх боломжтой статик сайт үүсгэгч бөгөөд бидэнд үндсэн орно, Markdown-д суурилсан файлууд, загварууд болон бусад зүйлсийг хангадаг. Үүнийг хэрхэн эхлүүлэх вэ:

  1. Бүх хамаарлыг суулгахын тулд дээрх багаж хэрэгслийн тохиргоог ажиллуулна уу.
  2. Үндсэн /bootstrapлавлахаас npm run docs-serveтушаалын мөрөнд ажиллуулна уу.
  3. Хөтөч дээрээ нээгээд http://localhost:9001/, voilà.

Хюго ашиглах талаар түүний баримт бичгийг уншина уу .

Алдааг олж засварлах

Хэрэв та хамаарлыг суулгахад асуудал гарвал өмнөх бүх хамаарлын хувилбаруудыг (дэлхий болон орон нутгийн) устгана уу. Дараа нь дахин ажиллуул npm install.