Багаж хэрэгсэл бүтээх
Bootstrap-д орсон npm скриптүүдийг манай баримт бичгийг бүтээх, эх кодыг эмхэтгэх, тест ажиллуулах болон бусад зүйлд хэрхэн ашиглах талаар суралцаарай.
Багажны тохиргоо
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 |
Баримт бичгийг дотооддоо бүтээж ажиллуулдаг. |
Сасс
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
.