ສ້າງເຄື່ອງມື
ຮຽນຮູ້ວິທີການໃຊ້ສະຄຣິບ npm ທີ່ລວມຢູ່ຂອງ Bootstrap ເພື່ອສ້າງເອກະສານຂອງພວກເຮົາ, ລວບລວມລະຫັດແຫຼ່ງ, ການທົດສອບ, ແລະອື່ນໆ.
ການຕັ້ງຄ່າເຄື່ອງມື
Bootstrap ໃຊ້ npm scripts ສໍາລັບລະບົບການກໍ່ສ້າງຂອງມັນ. package.json ຂອງພວກເຮົາ ປະກອບມີວິທີການທີ່ສະດວກໃນການເຮັດວຽກກັບກອບ, ລວມທັງການລວບລວມລະຫັດ, ການທົດສອບແລ່ນ, ແລະອື່ນໆ.
ເພື່ອນໍາໃຊ້ລະບົບການກໍ່ສ້າງຂອງພວກເຮົາແລະດໍາເນີນການເອກະສານຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນ, ທ່ານຈະຕ້ອງການສໍາເນົາຂອງໄຟລ໌ຕົ້ນສະບັບຂອງ Bootstrap ແລະ Node. ປະຕິບັດຕາມຂັ້ນຕອນເຫຼົ່ານີ້ແລະທ່ານຄວນກຽມພ້ອມທີ່ຈະ rock:
- ດາວໂຫຼດ ແລະຕິດຕັ້ງ Node.js , ທີ່ພວກເຮົາໃຊ້ເພື່ອຈັດການການຂຶ້ນກັບຂອງພວກເຮົາ.
- ດາວໂຫລດແຫຼ່ງຂອງ Bootstrap ຫຼື fork ເກັບຮັກສາຂອງ Bootstrap .
- ທ່ອງໄປຫາໄດເລກະທໍລີຮາກ
/bootstrap
ແລະແລ່ນnpm install
ເພື່ອຕິດຕັ້ງການຂື້ນກັບທ້ອງຖິ່ນຂອງພວກເຮົາທີ່ລະບຸໄວ້ໃນ package.json .
ເມື່ອສໍາເລັດ, ທ່ານຈະສາມາດດໍາເນີນການຄໍາສັ່ງຕ່າງໆທີ່ສະຫນອງໃຫ້ຈາກເສັ້ນຄໍາສັ່ງ.
ໃຊ້ npm scripts
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 ໂດຍໃຊ້ທໍ່ຊັບສິນຂອງທ່ານເອງ. ໃນເມື່ອກ່ອນພວກເຮົາເຄີຍໃຊ້ Node Sass ສໍາລັບ Bootstrap v4, ແຕ່ LibSass ແລະແພັກເກັດທີ່ສ້າງຂຶ້ນຢູ່ເທິງສຸດຂອງມັນ, ລວມທັງ Node Sass, ຕອນນີ້ ຖືກຍົກເລີກ ແລ້ວ .
Dart Sass ໃຊ້ຄວາມແມ່ນຍໍາຂອງຮອບຂອງ 10 ແລະສໍາລັບເຫດຜົນປະສິດທິພາບບໍ່ອະນຸຍາດໃຫ້ປັບຄ່ານີ້. ພວກເຮົາບໍ່ຫຼຸດຄວາມແມ່ນຍໍານີ້ໃນລະຫວ່າງການປະມວນຜົນເພີ່ມເຕີມຂອງ CSS ທີ່ສ້າງຂຶ້ນຂອງພວກເຮົາ, ເຊັ່ນວ່າໃນລະຫວ່າງການ minification, ແຕ່ຖ້າຫາກວ່າທ່ານເລືອກທີ່ຈະເຮັດແນວນັ້ນ, ພວກເຮົາແນະນໍາໃຫ້ຮັກສາຄວາມແມ່ນຍໍາຂອງຢ່າງຫນ້ອຍ 6 ເພື່ອປ້ອງກັນບັນຫາກ່ຽວກັບການ rounding ຂອງຕົວທ່ອງເວັບ.
ຕົວນຳໜ້າອັດຕະໂນມັດ
Bootstrap ໃຊ້ Autoprefixer (ລວມຢູ່ໃນຂະບວນການສ້າງຂອງພວກເຮົາ) ເພື່ອເພີ່ມຄໍານໍາຫນ້າຂອງຜູ້ຂາຍໂດຍອັດຕະໂນມັດກັບບາງຄຸນສົມບັດ CSS ໃນເວລາສ້າງ. ການເຮັດດັ່ງນັ້ນຊ່ວຍປະຢັດເວລາແລະລະຫັດຂອງພວກເຮົາໂດຍການອະນຸຍາດໃຫ້ພວກເຮົາຂຽນສ່ວນທີ່ສໍາຄັນຂອງ CSS ຂອງພວກເຮົາໃນເວລາດຽວໃນຂະນະທີ່ກໍາຈັດຄວາມຕ້ອງການຂອງຜູ້ຈໍາຫນ່າຍ mixins ຄືກັບທີ່ພົບໃນ v3.
ພວກເຮົາຮັກສາບັນຊີລາຍຊື່ຂອງຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນໂດຍຜ່ານ Autoprefixer ໃນໄຟລ໌ແຍກຕ່າງຫາກພາຍໃນບ່ອນເກັບມ້ຽນ GitHub ຂອງພວກເຮົາ. ເບິ່ງ .browserslistrc ສໍາລັບລາຍລະອຽດ.
RTLCSS
Bootstrap ໃຊ້ RTLCSS ເພື່ອປະມວນຜົນ CSS ທີ່ຖືກລວບລວມແລະປ່ຽນພວກມັນເປັນ RTL - ໂດຍພື້ນຖານແລ້ວການປ່ຽນຄຸນສົມບັດການຮັບຮູ້ທິດທາງແນວນອນ (ຕົວຢ່າງ. padding-left
) ກັບກົງກັນຂ້າມຂອງພວກເຂົາ. ມັນອະນຸຍາດໃຫ້ພວກເຮົາຂຽນ CSS ຂອງພວກເຮົາພຽງແຕ່ຄັ້ງດຽວແລະເຮັດໃຫ້ການປັບຕົວເລັກນ້ອຍໂດຍໃຊ້ຄໍາສັ່ງ ຄວບຄຸມ RTLCSS ແລະ ມູນຄ່າ .
ເອກະສານທ້ອງຖິ່ນ
ການດໍາເນີນການເອກະສານຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນຮຽກຮ້ອງໃຫ້ມີການນໍາໃຊ້ Hugo, ເຊິ່ງໄດ້ຮັບການຕິດຕັ້ງຜ່ານຊຸດ hugo-bin npm. Hugo ເປັນຕົວສ້າງເວັບໄຊແບບຄົງທີ່ໄວ ແລະຂ້ອນຂ້າງຂະຫຍາຍໄດ້ທີ່ສະໜອງໃຫ້ພວກເຮົາ: ພື້ນຖານປະກອບມີ, ໄຟລ໌ທີ່ອີງໃສ່ Markdown, ແມ່ແບບ, ແລະອື່ນໆອີກ. ນີ້ແມ່ນວິທີການເລີ່ມຕົ້ນມັນ:
- ດໍາເນີນການຜ່ານການ ຕິດຕັ້ງເຄື່ອງມື ຂ້າງເທິງເພື່ອຕິດຕັ້ງການຂຶ້ນກັບທັງຫມົດ.
/bootstrap
ຈາກໄດເລກະ ທໍລີ ຮາກ , ດໍາເນີນການnpm run docs-serve
ໃນເສັ້ນຄໍາສັ່ງ.- ເປີດ
http://localhost:9001/
ໃນຕົວທ່ອງເວັບຂອງທ່ານ, ແລະvoilà.
ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບການໃຊ້ Hugo ໂດຍການອ່ານ ເອກະສານ ຂອງມັນ .
ການແກ້ໄຂບັນຫາ
ຖ້າເຈົ້າພົບບັນຫາກັບການຕິດຕັ້ງ dependency, ຖອນການຕິດຕັ້ງທຸກລຸ້ນທີ່ຂຶ້ນກັບກ່ອນໜ້ານີ້ (ທົ່ວໂລກ ແລະທ້ອງຖິ່ນ). ຫຼັງຈາກນັ້ນ, rerun npm install
.