การต่อสู้ของสคริปต์สร้างอึก Vs Grunt

ฉันได้เขียนเกี่ยวกับวิธีเริ่มต้นกับ Gulp รวมถึงวิธีเริ่มต้นกับ Grunt พวกเขาทั้งสอง ทำให้งานของเราเป็นไปโดยอัตโนมัติ, พวกเขาทั้งสอง ใช้โหนด, และพวกเขาทั้งสองต้องการให้คุณ สร้างงานและติดตั้งปลั๊กอิน บางประเภท แต่คุณสงสัยเกี่ยวกับความแตกต่างระหว่างสองหรือแม้กระทั่งซึ่งดีกว่า?

ในบทความนี้ฉันจะเน้นเป็นหลัก ความแตกต่างระหว่างสองโครงการนี้ ซึ่งอาจเป็นปัจจัยในการช่วยให้คุณตัดสินใจเลือกหนึ่งในสองที่คุณเห็นว่าดีกว่าสำหรับตัวคุณเอง ฉันจะใช้รหัสบางอย่างซึ่งอาจไม่คุ้นเคย ถ้าเป็นฉันขอแนะนำให้อ่านบทความทั้งสองที่ตีพิมพ์ก่อนหน้านี้ก่อนที่คุณจะเริ่ม.

เพิ่มเติมเกี่ยวกับ Hongkiat.com

• วิธีเริ่มต้นกับอึก
• วิธีเริ่มต้นกับ Grunt

ความเร็ว

ความแตกต่างที่สำคัญระหว่าง Gulp และ Grunt อยู่ที่ วิธีจัดการกับงานอัตโนมัติภายในภายใน. อึกใช้ Node stream ขณะที่ Grunt ใช้ไฟล์ temp เราจะพูดกันว่าเป็นภาษาอังกฤษธรรมดา?

สมมติว่าคุณต้องการเขียนรหัส SASS สำหรับโครงการของคุณ คุณต้องการที่จะรวบรวมรหัส SASS ของคุณและจากนั้นอาจลดขนาดให้เล็กลง.

Grunt จัดการเรื่องนี้โดยใช้ ไฟล์ตัวกลาง ซึ่งเป็นการดำเนินงานของดิสก์ I / O ไฟล์ SASS ของคุณรวบรวมแล้วเขียนลงในไฟล์ชั่วคราว ไฟล์ชั่วคราวถูกใช้โดยตัวแก้ไขอัตโนมัติแล้วผลิตภัณฑ์สุดท้ายจะถูกเขียนไปยังไฟล์ปลายทาง.

อึกดูแลทั้งหมดนี้ ในความทรงจำ. รวบรวมไฟล์ SASS ของคุณแล้วผลลัพธ์จะถูกส่งไปยังโปรแกรมแก้ไขอัตโนมัติโดยไม่ต้องเขียนลงในไฟล์และไฟล์ปลายทางจะถูกเขียนออกมา.

เมื่อเปรียบเทียบกับการดำเนินการในหน่วยความจำการเขียนดิสก์จะช้าซึ่งหมายความว่า อึกมีข้อได้เปรียบด้านความเร็วที่ยิ่งใหญ่ (สำหรับตอนนี้). การเปรียบเทียบความเร็วทำได้โดย tech.tmw ซึ่งแสดงให้เห็นว่างานส่วนใหญ่ทำงานเร็วกว่า Gulp อย่างน้อยสองเท่า ในขณะที่นี่ไม่ใช่การศึกษาทางวิทยาศาสตร์อย่างมหาศาลแนวโน้มอยู่ที่นั่นและฉันได้เห็นแบบเดียวกันกับโครงการของตัวเอง แต่ความแตกต่างของความเร็วคือความแตกต่างของความเร็ว?

ความแตกต่างในไม่กี่วินาที

สำหรับโครงการส่วนใหญ่สิ่งนี้จะไม่สำคัญ. โครงการส่วนใหญ่มีขนาดเล็ก. เมื่อคุณสร้างธีม WordPress หรือสิ่งที่คล้ายกันจำนวนไฟล์ที่คุณต้องใช้ในการทำงานนั้นดีพอสมควร มันไม่สำคัญว่าสไตล์ชีตของคุณจะถูกรวบรวมใน 400ms หรือ 800ms.

นอกจากนี้โครงการส่วนใหญ่สามารถ มีโครงสร้างในลักษณะที่ปัญหาที่เข้มข้นที่สุดบางอย่างสามารถถูกเลี่ยงได้. หากคุณมีไฟล์ SASS 50 ไฟล์คุณสามารถต่อเชื่อมไฟล์เหล่านั้นได้อย่างรวดเร็วในขณะที่กำลังพัฒนาคุณไม่จำเป็นต้องเพิ่มไฟล์อัตโนมัติหรือลดขนาดไฟล์ลง คุณไม่จำเป็นต้องปรับภาพให้เหมาะสมทุกครั้งที่คุณบันทึกโครงการและอื่น ๆ.

แม้ในขณะที่คุณต้องการปืนใหญ่เพราะคุณกำลังผลักงานของคุณไปยังเซิร์ฟเวอร์จัดเตรียมหรือเมื่อคุณกำลังปรับปรุงพื้นที่เก็บข้อมูลสร้างเวลา 5 วินาทีหรือ 9 วินาทีสร้างความแตกต่างได้มาก?

Grunt จะเพิ่มการรองรับการวางท่อในการปล่อย 0.5 ที่กำลังจะมาถึงซึ่งจะเพิ่มความเร็วให้มากขึ้นทำให้จุดนี้เป็นจุดที่สงสัย.

ชุมชน

Grunt นั้นใช้เวลานานกว่า Gulp มากดังนั้นจึงมีฐานผู้ใช้ที่สำคัญ ปัจจุบันความน่าสนใจได้รับประมาณ 37,000 ดาวน์โหลดต่อวันโดยเฉลี่ยอึกได้รับมากกว่าครึ่งหนึ่งที่อยู่ใกล้กับ 23,000 เครื่องหมาย ที่ถูกกล่าวว่าอึกได้เพียงรอบปีครึ่งทำให้จำนวนที่มีเกียรติที่จะพูดน้อย.

Grunt ปัจจุบันมีปลั๊กอินมากกว่า 4000 ปลั๊กอินในขณะที่ Gulp มีปลั๊กอินมากกว่า 1,200 ปลั๊กอิน ตามแนวโน้มของ Google ผู้คนจำนวนมากค้นหาสิ่งที่เกี่ยวข้องกับ Grunt มีฟอรัมเพิ่มเติมที่จัดการกับมันและสนับสนุนชุมชนโดยทั่วไป.

แน่นอนอึกขึ้นและมาซึ่งหมายความว่านี่คือ มีแนวโน้มที่จะออกมาในระยะยาว. อย่างไรก็ตามนี่เป็นอุปสรรคสำหรับนักพัฒนาบางคนโดยเฉพาะอย่างยิ่งโครงการ Grunt-based ที่ทำงานอยู่.

ฉันอยากจะชี้ให้เห็นว่าชุมชนของทั้งสองนั้นเป็นอย่างไร ดีมาก. เท่าที่ฉันสามารถบอกได้ว่าความสัมพันธ์ระหว่างผู้นำในแต่ละชุมชนนั้นน่าทึ่งมากและควรเป็นตัวอย่างให้กับทุกคน ผู้สร้าง Gulp ช่วยให้ผู้เขียนการเปรียบเทียบการทดสอบความเร็วปรับปรุงความแม่นยำของเวลาซึ่งนำไปสู่การลดลงของความแตกต่างของเวลา นั่นคือสิ่งที่ฉันเรียกสุภาพบุรุษ!

การกำหนดค่ารหัส Vs

เห็นได้ชัดว่านี่เป็นจุดเปลี่ยนสำหรับหลาย ๆ คน แต่จริงๆแล้วฉันไม่สามารถเห็นปัญหาได้ที่นี่.

การโต้เถียงเป็นไปตามนี้: อึกเป็นตัวอย่างที่ดี รหัสผ่านการกำหนดค่าอาจเป็นสิ่งที่ดีเมื่อการกำหนดค่าได้รับความสับสนเล็กน้อย. คนอื่นพูดว่าในขณะนี้เป็นจริงและอึกก็ง่ายกว่า อ่าน, มันยากกว่าที่จะ เขียน เพราะ การวางท่ออาจทำให้สับสนเล็กน้อย.

ก่อนที่ผมจะยกน้ำหนักนี่เป็นตัวอย่างแรกใน Grunt จากนั้นใน Gulp:

 grunt.initConfig (sass: dist: files: [src: 'dev / *. scss', ปลายทาง: '.tmp / styles', ขยาย: true, ext: '.css'], autoprefixer : dist: ไฟล์: [ขยาย: จริง, cwd: '.tmp / styles', src: ', * / *. css', ปลายทาง: 'css / styles'], ดู:  สไตล์: ไฟล์: ['dev / *. scss'], ภารกิจ: ['sass: dist', 'autoprefixer: dist']); grunt.registerTask ('ค่าเริ่มต้น', ['สไตล์', 'ดู']); 

 gulp.task ('sass', function () gulp.src ('dev / *. scss') .pipe (sass ()) .pipe (autoprefixer ()) .pipe (gulp.dest ('css / สไตล์' ));); gulp.task ('ค่าเริ่มต้น', ฟังก์ชัน () gulp.run ('sass'); gulp.watch ('dev / *. scss', ฟังก์ชัน () gulp.run ('sass');); ); 

ความคิดเห็นของฉันคือมันไม่สำคัญ แน่นอนว่าถ้าคุณคุ้นเคยกับวิธีแรกคุณอาจจำเป็นต้องใช้เวลาหาคำตอบที่สอง แต่สิ่งนี้กลับเป็นจริงเช่นกัน ดังนั้นสำหรับฉัน “มันสับสน” การโต้แย้งไม่ถูกต้องสมบูรณ์. ใด วิธีการใหม่ที่คุณเรียนรู้ทำให้เกิดความสับสนในตอนแรก, แต่ถ้าคุณใช้เวลาในการทำความเข้าใจกับตรรกะของแต่ละสิ่งมันก็จะปรากฏออกมา.

ที่กล่าวว่าฉันชอบส่วนตัว API ของอึกเพราะมันสะอาดเอ่อและมันสะท้อนให้เห็นถึงวิธีที่ฉันคิดอย่างใกล้ชิดกว่า Grunt แน่นอนว่านี่คือ อัตนัยอย่างสมบูรณ์ และไม่ใช่ปัญหากับ Grunt เลยเป็นเพียงความชอบส่วนตัวของฉัน.

วิธีการเลือก

ฉันไม่คิดว่าจะมีคำถามใด ๆ เกี่ยวกับความจริงที่ว่าทั้ง Grunt และ Gulp เป็นเครื่องมือที่ยอดเยี่ยมและช่วยให้ผู้คนประหยัดเวลานับไม่ถ้วนในช่วงหลายปีที่ผ่านมา Grunt ช้าลงเล็กน้อยในตอนนี้ แต่มีชุมชนที่ใหญ่กว่ามาก อึกเร็วกว่ามี API ที่สะอาดกว่า แต่ขาดฐานผู้ใช้.

ฉันคิดว่าการตัดสินใจในท้ายที่สุดจะลงมา ความต่อเนื่องปลั๊กอินที่มีอยู่ และ การตั้งค่า.

(1) หากคุณใช้ Grunt / Gulp อยู่พักหนึ่งแล้ว คุณมีความสุขกับมัน, ไม่มีเหตุผลที่จะเปลี่ยน.

(2) หากโครงการของคุณ ต้องใช้ปลั๊กอิน ซึ่งไม่ได้จัดไว้ให้โดย Gulp และคุณไม่ได้เตรียมที่จะเขียนด้วยตัวคุณเองคุณจะต้องไปกับ Grunt.

(3) หากข้อพิจารณาสองข้อข้างต้นไม่สามารถใช้กับคุณได้ ฉันขอแนะนำให้ลองทั้งคู่และดู อันไหนที่ติดกับคุณ.

อย่างที่ฉันบอกว่าฉันเลือกที่จะใช้ Gulp เพราะฉันชอบ API ที่สะอาดกว่าดีกว่า แต่ฉันก็รู้สึกสบายใจที่จะใช้ Grunt ถ้าโครงการเรียกร้องให้ใช้ สิ่งที่คุณควร ไม่ do อ่านว่า Mr. Know-it-all กล่าวว่าอึกดีกว่าและยอมรับมัน ในขณะที่มีความแตกต่างไม่มีผู้ชนะที่ชัดเจนและ ทั้งสองโครงการสามารถและจะอยู่ร่วมกันได้. ลองพวกเขาและตัดสินใจด้วยตัวเอง.

หมายเหตุ: คุณอาจต้องการพิจารณาความคิดเห็นจากผู้ใช้เช่น Keith Cirkel (ที่ปรึกษา Javascript) ที่แนะนำให้คุณใช้ ค่า. ที่น่าสนใจของเขาทำไมเราควรหยุดใช้บทความ Grunt & Gulp เขาแนะนำให้ใช้ npm.

อ่านเพิ่มเติม

มีบทความที่ยอดเยี่ยมอื่น ๆ อีกมากมายเกี่ยวกับหัวข้อนี้ ฉันอยากจะแนะนำอย่างใดอย่างหนึ่งต่อไปนี้สำหรับการอ่านเพิ่มเติม; ไม่เคยเจ็บที่จะอ่านสิ่งที่คนอื่นพูด!

• Grunt vs Gulp - เกินกว่าตัวเลข (ขอบคุณเป็นพิเศษสำหรับตัวอย่างที่ชัดเจน)
• อึกฮึดฮัดอะไรก็ตาม
• เลือก: Grunt, Gulp หรือ npm?
• เร่งความเร็วอึกและ Grunt
• ทำไมเราควรหยุดใช้ Grunt & Gulp
• สร้างสงคราม (ใช้ลูกศรเพื่อนำทาง)
• ไม่จำเป็นต้องทำเสียงฮึดฮัดให้รับอึกของอากาศบริสุทธิ์