in English

ສ້າງເຄື່ອງມື

ຮຽນຮູ້ວິທີການໃຊ້ສະຄຣິບ npm ທີ່ລວມຢູ່ຂອງ Bootstrap ເພື່ອສ້າງເອກະສານຂອງພວກເຮົາ, ລວບລວມລະຫັດແຫຼ່ງ, ການທົດສອບ, ແລະອື່ນໆ.

ການ​ຕັ້ງ​ຄ່າ​ເຄື່ອງ​ມື​

Bootstrap ໃຊ້ npm scripts ສໍາລັບລະບົບການກໍ່ສ້າງຂອງມັນ. package.json ຂອງພວກເຮົາ ປະກອບມີວິທີການທີ່ສະດວກໃນການເຮັດວຽກກັບກອບ, ລວມທັງການລວບລວມລະຫັດ, ການທົດສອບແລ່ນ, ແລະອື່ນໆ.

ເພື່ອນໍາໃຊ້ລະບົບການກໍ່ສ້າງຂອງພວກເຮົາແລະດໍາເນີນການເອກະສານຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນ, ທ່ານຈະຕ້ອງການສໍາເນົາຂອງໄຟລ໌ຕົ້ນສະບັບຂອງ Bootstrap ແລະ Node. ປະຕິບັດຕາມຂັ້ນຕອນເຫຼົ່ານີ້ແລະທ່ານຄວນກຽມພ້ອມທີ່ຈະ rock:

  1. ດາວໂຫຼດ ແລະຕິດຕັ້ງ Node.js , ທີ່ພວກເຮົາໃຊ້ເພື່ອຈັດການການຂຶ້ນກັບຂອງພວກເຮົາ.
  2. ດາວໂຫລດແຫຼ່ງຂອງ Bootstrap ຫຼື fork ເກັບຮັກສາຂອງ Bootstrap .
  3. ທ່ອງໄປຫາໄດເລກະທໍລີຮາກ /bootstrapແລະແລ່ນ npm installເພື່ອຕິດຕັ້ງການຂື້ນກັບທ້ອງຖິ່ນຂອງພວກເຮົາທີ່ລະບຸໄວ້ໃນ package.json .

ເມື່ອສໍາເລັດ, ທ່ານຈະສາມາດດໍາເນີນການຄໍາສັ່ງຕ່າງໆທີ່ສະຫນອງໃຫ້ຈາກເສັ້ນຄໍາສັ່ງ.

ໃຊ້ npm scripts

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 ກັບໂຄງການເລີ່ມຕົ້ນຂອງພວກເຮົາ! ໄປທີ່ ບ່ອນເກັບແມ່ແບບ tws/bootstrap-npm-starter ເພື່ອເບິ່ງວິທີສ້າງ ແລະປັບແຕ່ງ Bootstrap ໃນໂຄງການ npm ຂອງທ່ານເອງ. ລວມມີ Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ແລະ Bootstrap Icons.

ຊາສ

Bootstrap v4 ໃຊ້ Node Sass ສໍາລັບການລວບລວມໄຟລ໌ແຫຼ່ງ Sass ຂອງພວກເຮົາເຂົ້າໄປໃນໄຟລ໌ CSS (ລວມຢູ່ໃນຂະບວນການສ້າງຂອງພວກເຮົາ). ເພື່ອສິ້ນສຸດດ້ວຍ CSS ທີ່ສ້າງຂຶ້ນດຽວກັນເມື່ອລວບລວມ Sass ໂດຍໃຊ້ທໍ່ຊັບສິນຂອງທ່ານເອງ, ທ່ານຈະຕ້ອງໃຊ້ Sass compiler ທີ່ສະຫນັບສະຫນູນຢ່າງຫນ້ອຍລັກສະນະທີ່ Node Sass ເຮັດ. ນີ້ແມ່ນສິ່ງທີ່ຄວນສັງເກດເພາະວ່າໃນວັນທີ 26 ເດືອນຕຸລາປີ 2020, LibSass ແລະແພັກເກດທີ່ສ້າງຂຶ້ນຢູ່ເທິງສຸດຂອງມັນ - ລວມທັງ Node Sass - ຖືກຍົກ ເລີກ .

ຖ້າທ່ານຕ້ອງການຄຸນສົມບັດ Sass ໃໝ່ໆ ຫຼືຄວາມເຂົ້າກັນໄດ້ກັບມາດຕະຖານ CSS ໃໝ່ກວ່າ, Dart Sass ປະຈຸບັນເປັນການປະຕິບັດຫຼັກຂອງ Sass ແລະສະຫນັບສະຫນູນ JavaScript API ທີ່ເຫມາະສົມກັບ Node Sass ຢ່າງສົມບູນ (ມີຂໍ້ຍົກເວັ້ນຈໍານວນຫນ້ອຍທີ່ລະບຸໄວ້ໃນຫນ້າ Dart Sass's GitHub ).

ພວກເຮົາເພີ່ມຄວາມແມ່ນຍໍາຂອງຮອບ Sass ເປັນ 6 (ຕາມຄ່າເລີ່ມຕົ້ນ, ມັນເປັນ 5 ໃນ Node Sass) ເພື່ອປ້ອງກັນບັນຫາກັບຕົວທ່ອງເວັບຂອງຮອບ. ຖ້າທ່ານໃຊ້ Dart Sass, ນີ້ຈະບໍ່ແມ່ນສິ່ງທີ່ທ່ານຕ້ອງການປັບ, ເພາະວ່າຜູ້ລວບລວມຂໍ້ມູນນັ້ນໃຊ້ຄວາມແມ່ນຍໍາຂອງຮອບຂອງ 10 ແລະສໍາລັບເຫດຜົນປະສິດທິພາບບໍ່ອະນຸຍາດໃຫ້ປັບ.

ຕົວນຳໜ້າອັດຕະໂນມັດ

Bootstrap ໃຊ້ Autoprefixer (ລວມຢູ່ໃນຂະບວນການສ້າງຂອງພວກເຮົາ) ເພື່ອເພີ່ມຄໍານໍາຫນ້າຂອງຜູ້ຂາຍໂດຍອັດຕະໂນມັດກັບບາງຄຸນສົມບັດ CSS ໃນເວລາສ້າງ. ການເຮັດດັ່ງນັ້ນຊ່ວຍປະຢັດເວລາແລະລະຫັດຂອງພວກເຮົາໂດຍການອະນຸຍາດໃຫ້ພວກເຮົາຂຽນສ່ວນທີ່ສໍາຄັນຂອງ CSS ຂອງພວກເຮົາໃນເວລາດຽວໃນຂະນະທີ່ກໍາຈັດຄວາມຕ້ອງການຂອງຜູ້ຈໍາຫນ່າຍ mixins ຄືກັບທີ່ພົບໃນ v3.

ພວກເຮົາຮັກສາບັນຊີລາຍຊື່ຂອງຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນໂດຍຜ່ານ Autoprefixer ໃນໄຟລ໌ແຍກຕ່າງຫາກພາຍໃນບ່ອນເກັບມ້ຽນ GitHub ຂອງພວກເຮົາ. ເບິ່ງ .browserslistrc ສໍາລັບລາຍລະອຽດ.

ເອກະສານທ້ອງຖິ່ນ

ການດໍາເນີນການເອກະສານຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນຮຽກຮ້ອງໃຫ້ມີການນໍາໃຊ້ Hugo, ເຊິ່ງໄດ້ຮັບການຕິດຕັ້ງຜ່ານຊຸດ hugo-bin npm. Hugo ເປັນຕົວສ້າງເວັບໄຊແບບຄົງທີ່ໄວ ແລະຂ້ອນຂ້າງຂະຫຍາຍໄດ້ທີ່ສະໜອງໃຫ້ພວກເຮົາ: ພື້ນຖານປະກອບມີ, ໄຟລ໌ທີ່ອີງໃສ່ Markdown, ແມ່ແບບ, ແລະອື່ນໆອີກ. ນີ້ແມ່ນວິທີການເລີ່ມຕົ້ນມັນ:

  1. ດໍາເນີນການຜ່ານການ ຕິດຕັ້ງເຄື່ອງມື ຂ້າງເທິງເພື່ອຕິດຕັ້ງການຂຶ້ນກັບທັງຫມົດ.
  2. /bootstrapຈາກໄດເລກະ ທໍລີ ຮາກ , ດໍາເນີນການ npm run docs-serveໃນເສັ້ນຄໍາສັ່ງ.
  3. ເປີດ http://localhost:9001/ໃນຕົວທ່ອງເວັບຂອງທ່ານ, ແລະvoilà.

ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບການໃຊ້ Hugo ໂດຍການອ່ານ ເອກະສານ ຂອງມັນ .

ການແກ້ໄຂບັນຫາ

ຖ້າເຈົ້າພົບບັນຫາກັບການຕິດຕັ້ງ dependency, ຖອນການຕິດຕັ້ງທຸກລຸ້ນທີ່ຂຶ້ນກັບກ່ອນໜ້ານີ້ (ທົ່ວໂລກ ແລະທ້ອງຖິ່ນ). ຫຼັງ​ຈາກ​ນັ້ນ​, rerun npm install.