Хувь нэмэр оруулах

Манай бичиг баримтын скрипт болон тестийг бүтээхэд зориулж Bootstrap-г хөгжүүлэхэд тусална уу.

Энэ хуудсан дээр

Багажны тохиргоо

Bootstrap нь баримт бичгийг бүтээх, эх файлуудыг эмхэтгэхийн тулд npm скриптүүдийг ашигладаг. Манай package.json нь эдгээр скриптүүдийг код эмхэтгэх, тест ажиллуулах болон бусад зүйлд зориулагдсан. Эдгээр нь манай агуулах болон баримт бичгээс гадуур ашиглахад зориулагдаагүй болно.

Манай бүтээх системийг ашиглаж, манай баримт бичгийг дотооддоо ажиллуулахын тулд танд Bootstrap-ийн эх файл болон Node-ийн хуулбар хэрэгтэй болно. Эдгээр алхмуудыг дагана уу, та рок хийхэд бэлэн байх ёстой:

Бид өөрсдийн хамаарлыг удирдахад ашигладаг Node.js-г татаж аваад суулгаарай .
Bootstrap-ийн эх сурвалжийг татаж авах эсвэл Bootstrap-ийн репозиторыг сэрээ .
Үндсэн /bootstrapлавлах руу шилжиж, package.jsonnpm install -д жагсаасан манай локал хамаарлыг суулгахын тулд ажиллуулна уу .

Дууссаны дараа та тушаалын мөрөөс өгсөн янз бүрийн тушаалуудыг ажиллуулах боломжтой болно.

npm скрипт ашиглах

Манай package.json нь төслийг боловсруулах олон даалгавруудыг агуулдаг. npm runТерминал дээрх бүх npm скриптүүдийг харахын тулд ажиллуулна уу. Үндсэн ажлуудад дараахь зүйлс орно.

Даалгавар	Тодорхойлолт
`npm start`	CSS болон JavaScript-г эмхэтгэж, баримт бичгийг бүрдүүлж, локал сервер ажиллуулна.
`npm run dist`	`dist/`Эмхэтгэсэн файлуудтай лавлах үүсгэнэ . Sass , Autoprefixer , болон terser шаарддаг .
`npm test`	Гүйлтийн дараа орон нутагт туршилт явуулна`npm run dist`
`npm run docs-serve`	Баримт бичгийг дотооддоо бүтээж ажиллуулдаг.

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

Сасс

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

Dart Sass нь 10-ийн дугуйралтын нарийвчлалыг ашигладаг бөгөөд үр ашгийн үүднээс энэ утгыг тохируулахыг зөвшөөрдөггүй. Бид үүсгэсэн CSS-ийг жижиглэх гэх мэт цаашид боловсруулах явцад энэ нарийвчлалыг бууруулдаггүй, гэхдээ хэрэв та үүнийг сонгосон бол хөтчийг бөөрөнхийлөхтэй холбоотой асуудлаас урьдчилан сэргийлэхийн тулд хамгийн багадаа 6 нарийвчлалтай байлгахыг зөвлөж байна.

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

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

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

RTLCSS

Bootstrap нь хөрвүүлсэн CSS-ийг боловсруулж, тэдгээрийг RTL болгон хөрвүүлэхийн тулд RTLCSS -ийг ашигладаг - үндсэндээ хэвтээ чиглэлийг мэддэг шинж чанаруудыг (жишээ padding-leftнь ) эсрэгээр нь сольдог. Энэ нь бидэнд CSS-ээ зөвхөн нэг удаа бичиж, RTLCSS удирдлага болон утгын удирдамжийг ашиглан бага зэргийн өөрчлөлт хийх боломжийг олгодог.

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

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

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

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

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

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