ເນື້ອຫາ
ນັກແລ່ນທີ່ເຮັດວຽກ JavaScript ເຊັ່ນ Grunt ໄດ້ຮັບຄວາມນິຍົມສູງຈາກນັກພັດທະນາດ້ານ ໜ້າ. ນີ້ແມ່ນຍ້ອນວ່າພວກເຂົາຊ່ວຍເຮັດສິ່ງດຽວທີ່ພວກເຮົາທຸກຄົນຕ້ອງການເຮັດໃນວຽກຂອງພວກເຮົາ - ປະຫຍັດເວລາ!
ແຕ່ດ້ວຍຫລາຍກວ່າ 5,000 (ແລະນັບ) ໂປແກຼມ Grunt ທີ່ມີໃນປະຈຸບັນ, ມັນສາມາດຍາກ ສຳ ລັບນັກພັດທະນາທີ່ຈະຊອກຫາເພັດເຫລົ່ານັ້ນຢູ່ໃນໄລຍະຫຍາບ. ພວກເຮົາໄດ້ພິຈາລະນາເບິ່ງຄືນໃນຊ່ວງເວລາຂອງພວກເຮົາທີ່ຕິດກັບ Grunt ເພື່ອຊອກຫາສູດທີ່ດີເລີດຂອງ Grunt plugins ທີ່ທ່ານຄວນໃຊ້.
01. Uglify
ທຸກໆນັກພັດທະນາດ້ານ ໜ້າ ທີ່ມີຄ່າເກືອຂອງພວກເຂົາຮູ້ກ່ຽວກັບຂໍ້ດີຂອງການເຮັດເອກະສານ JavaScript, ແລະນັ້ນແມ່ນສິ່ງທີ່ໂປແກຼມນີ້ເຮັດ. ສິ່ງດັ່ງກ່າວແມ່ນຄວາມນິຍົມຂອງມັນ, ມັນໄດ້ຖືກລວມເຂົ້າໃນຄູ່ມືການເລີ່ມຕົ້ນຂອງ Grunt. ເຖິງວ່າຈະມີຊື່, ປັpluginກອິນນີ້ຍັງສາມາດຖືກ ນຳ ໃຊ້ເພື່ອເຮັດໃຫ້ລະຫັດ JavaScript ຂອງທ່ານສວຍງາມຄືກັນ - ເຖິງແມ່ນວ່າມັນບໍ່ມີປະໂຫຍດຫຼາຍປານໃດ ສຳ ລັບການ ນຳ ໃຊ້ການຜະລິດ.
02. ສ
ມັນອາດຈະມີການໂຕ້ວາທີກ່ຽວກັບວ່າໂປເຊດເຊີ CSS pre-processor ສາມາດຄວບຄຸມຫຼັກການໄດ້ແນວໃດ, ແຕ່ວ່ານີ້ທີ່ Stickyeyes, ພວກເຮົາໄດ້ຕົກລົງກັບ Sass ຫຼາຍກວ່າຄູ່ແຂ່ງຕົ້ນຕໍຂອງມັນ, ໜ້ອຍ ກວ່າ. ປັinກອິນນີ້ຊ່ວຍໃຫ້ພວກເຮົາຂຽນເອກະສານ Sass ຂອງພວກເຮົາແລະໄດ້ລວບລວມຂໍ້ມູນໃຫ້ກັບ CSS ໂດຍອັດຕະໂນມັດ. ຄຸນລັກສະນະຂອງການ ນຳ ໃຊ້ໂປແກຼມ CSS pre-processor ຮັບປະກັນບົດຂຽນແຍກຕ່າງຫາກໃນຕົວຂອງມັນເອງ, ແຕ່ວ່າມັນປອດໄພທີ່ຈະເວົ້າໄດ້ວ່າຖ້າທ່ານບໍ່ໃຊ້ມັນແລ້ວທ່ານກໍ່ມາຊ້າກັບງານລ້ຽງແລ້ວ!
03. CSSMin
ປັThisກອິນນີ້ແມ່ນທຽບເທົ່າ CSS ຂອງ Uglify. ມັນພຽງແຕ່ໄດ້ຮັບເອກະສານ CSS ທີ່ລະບຸໄວ້ແລະຫຼຸດຜ່ອນພວກມັນ. ແນ່ນອນຖ້າທ່ານ ກຳ ລັງຈະໃຊ້ສິ່ງນີ້ໂດຍສົມທົບກັບປັpluginກອິນ Sass ແລ້ວທ່ານ ຈຳ ເປັນຕ້ອງຮັບປະກັນວ່າວຽກນີ້ຖືກ ດຳ ເນີນການຫຼັງຈາກວຽກງານ Sass.
ມີຫລາຍທາງເລືອກ ສຳ ລັບ CSSMin ເຊິ່ງຍັງສາມາດຫຼຸດຂະ ໜາດ ຂອງເອກະສານ CSS ຂອງທ່ານໂດຍ ນຳ ໃຊ້ເຕັກນິກທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ; ອ່ານ CSS nano, CSS wring, CSS ນ້ອຍລົງ, ແລະອື່ນໆອ່ານດັດຊະນີທີ່ມີປະໂຫຍດນີ້ຖ້າທ່ານເຂົ້າໄປໃນປະເພດຂອງສິ່ງນັ້ນ.
04. Concat
ໃນຖານະເປັນຊື່ຊີ້ໃຫ້ເຫັນ, plugin ນີ້ພຽງແຕ່ໃຊ້ເວລາຫຼາຍໄຟລ໌ແລະ concatenates ໃຫ້ເຂົາເຈົ້າເຂົ້າໄປໃນຫນຶ່ງ. ເຊັ່ນດຽວກັນກັບລະຫັດ minifying, ໄຟລ໌ concatenating ຍັງເປັນການປະຕິບັດທີ່ດີທີ່ສຸດໃນອາຍຸສໍາລັບການຫຼຸດຜ່ອນເວລາໂຫຼດຫນ້າ.
ການສະຫຼຸບເອກະສານຄວນຖືກ ນຳ ໃຊ້ເຂົ້າໃນການຜະລິດຕະຫຼອດເວລາ ສຳ ລັບທັງ JavaScript ແລະ CSS. ນີ້ແມ່ນວຽກ ທຳ ມະດາທີ່ສຸດທີ່ຕ້ອງໄດ້ຮັບການ ດຳ ເນີນການ - ຫຼັງຈາກວຽກງານ CSS ການປະມວນຜົນແລະວຽກງານການ ກຳ ນົດນ້ອຍໆ ມັນງ່າຍທີ່ຈະພຽງແຕ່ບອກປັthisກອິນນີ້ໃຫ້ສະຫຼຸບເອກະສານທັງ ໝົດ ໃນໄດເລກະທໍລີສະເພາະ, ແຕ່ຈົ່ງລະວັງ ຄຳ ສັ່ງທີ່ວ່າແຟ້ມເອກະສານດັ່ງກ່າວຈະສະຫຼຸບ - ທ່ານອາດຈະຕ້ອງໃຫ້ ຄຳ ສັ່ງສະເພາະຫຼືຕັ້ງຊື່ເອກະສານດັ່ງນັ້ນພວກເຂົາຈຶ່ງສະຫລຸບຢູ່ຕາມ ລຳ ດັບທີ່ທ່ານຕ້ອງການ. .
05. ImageMin
ໃນລັກສະນະດຽວກັນກັບ CSSMin ແລະ Uglify, ImageMin ແກ້ໄຂບັນຫາເກົ່າແກ່ອີກຄັ້ງ ໜຶ່ງ ສຳ ລັບການໂຫຼດ ໜ້າ ເວັບ - file size size. ຮູບພາບ 'ການ ຈຳ ກັດ' ໂດຍປົກກະຕິແລ້ວແມ່ນການເອີ້ນທີ່ Port ສຳ ລັບການເພີ່ມປະສິດທິພາບ, ສະນັ້ນປັpluginກອິນນີ້ແມ່ນ ຈຳ ເປັນເພື່ອຫຼຸດຂະ ໜາດ ໄຟລ໌ຂອງ ໜ້າ ທັງ ໝົດ ລົງໃຫ້ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້.
ຖ້າທ່ານ ກຳ ລັງເຮັດວຽກກັບ JPG, PNG, GIF ຫຼື SVG (ຮູບແບບ vector ທີ່ມີຄວາມນິຍົມທີ່ເພີ່ມຂື້ນເລື້ອຍໆ), ປັpluginກອິນນີ້ຈະສົ່ງຜົນໃຫ້ມີການຫຼຸດຜ່ອນຂະ ໜາດ ໄຟລ໌ຂອງຮູບພາບຂອງທ່ານໂດຍບໍ່ ຈຳ ເປັນຕ້ອງຍົກນິ້ວມື. ຖ້າທ່ານມີຮູບພາບຫຼາຍໃນໂຄງການຂອງທ່ານມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະພຽງແຕ່ປະຕິບັດວຽກງານນີ້ໃນເວລາທີ່ທ່ານ ກຳ ລັງຊຸກຍູ້ການຜະລິດ, ແທນທີ່ຈະເຮັດວຽກນີ້ໃນງານສັງເກດເບິ່ງ (ເບິ່ງຈຸດຕໍ່ໄປ).
06. ເບິ່ງ
ປັpluginກອິນນີ້ບໍ່ໄດ້ສົ່ງຜົນກະທົບຕໍ່ເວັບໄຊທ໌ຂອງທ່ານກ່ອນ, ແຕ່ມັນກໍ່ມີປະໂຫຍດສູງສຸດໃນການສ້າງຂະບວນການ Grunt ທີ່ມີປະສິດຕິພາບ. ຈົ່ງສັງເກດເບິ່ງພຽງແຕ່ເບິ່ງລາຍຊື່ທີ່ທ່ານລະບຸໄວ້, ແລະເມື່ອບາງສິ່ງບາງຢ່າງປ່ຽນແປງມັນກໍ່ຈະເຮັດໃຫ້ວຽກ Grunt ອັດຕະໂນມັດ.
ດັ່ງນັ້ນທ່ານອາດຈະຕັ້ງເງື່ອນໄຂການເບິ່ງ ໜຶ່ງ ໃນໄດເລກະທໍລີ 'js' ຂອງທ່ານເພື່ອ ດຳ ເນີນວຽກງານ JavaScript ຂອງທ່ານແລະອີກອັນ ໜຶ່ງ ໃນລາຍຊື່ 'css' ຂອງທ່ານເພື່ອເຮັດວຽກ CSS ຂອງທ່ານ. ນີ້ຫມາຍຄວາມວ່າທ່ານຈະບໍ່ຕ້ອງດໍາເນີນການ Grunt ຕົ້ນຕໍຂອງທ່ານດ້ວຍຕົນເອງ! ພຽງແຕ່ເລີ່ມຕົ້ນວຽກງານສັງເກດເບິ່ງທີ່ຂີ້ຮ້າຍກ່ອນທີ່ທ່ານຈະເລີ່ມປ່ຽນແປງແລະທ່ານກໍ່ສາມາດລືມມັນຢູ່ບ່ອນນັ້ນ.
ຄຳ ເວົ້າ: Jamie ໄສ້
Jamie Shields ແມ່ນຜູ້ພັດທະນາດ້ານຫລັງຂອງອົງການກາລະຕະຫຼາດດິຈິຕອນ Stickyeyes.
ແບບນີ້ບໍ? ອ່ານນີ້!
- Grunt vs Gulp: ທ່ານຄວນເລືອກເຄື່ອງມືການກໍ່ສ້າງ JavaScript ໃດ?
- 8 ວິທີການເພື່ອປັບປຸງການຕັ້ງຄ່າ Grunt ຂອງທ່ານ
- ຫົວຂໍ້ WordPress ຟຣີທີ່ດີທີ່ສຸດ
