เนื้อหา
นักวิ่งงาน JavaScript เช่น Grunt ได้รับความนิยมอย่างมากจากนักพัฒนาส่วนหน้า นี่เป็นเพราะพวกเขาช่วยทำสิ่งหนึ่งที่เราทุกคนอยากทำในงานของเรา - ประหยัดเวลา!
แต่ด้วยปลั๊กอิน Grunt มากกว่า 5,000 ตัว (และเพิ่มขึ้นเรื่อย ๆ ) ในขณะนี้อาจเป็นเรื่องยากสำหรับนักพัฒนาที่จะหา ‘เพชรในขุมนรก’ ได้ เราได้ย้อนกลับไปดูเวลาที่เราติดอยู่ใน Grunt เพื่อค้นหาสูตรที่สมบูรณ์แบบของปลั๊กอิน Grunt ที่คุณควรใช้
01. อัปลักษณ์
นักพัฒนาฟรอนต์เอนด์ทุกคนต่างรู้ดีเกี่ยวกับข้อดีของการลดขนาดไฟล์ JavaScript และนั่นคือสิ่งที่ปลั๊กอินนี้ทำ นั่นคือความนิยมซึ่งรวมอยู่ในคู่มือการเริ่มต้นใช้งาน Grunt แม้จะมีชื่อ แต่ปลั๊กอินนี้ยังสามารถใช้เพื่อทำให้โค้ด JavaScript ของคุณสวยงามได้เช่นกันแม้ว่าจะไม่ได้มีประโยชน์อย่างยิ่งสำหรับการใช้งานจริง
02. สส
อาจมีการถกเถียงกันอยู่บ้างว่าตัวประมวลผลล่วงหน้า CSS ตัวใดที่ปกครองรูสต์ แต่ที่ Stickyeyes เราตัดสิน Sass มากกว่าคู่แข่งหลัก Less ปลั๊กอินนี้ช่วยให้เราสามารถเขียนไฟล์ Sass ของเราและรวบรวมเป็น CSS โดยอัตโนมัติ ข้อดีของการใช้ตัวประมวลผลล่วงหน้า CSS รับประกันบทความแยกต่างหากในตัวมันเอง แต่ก็ปลอดภัยที่จะบอกว่าถ้าคุณไม่ได้ใช้งานอยู่แล้วคุณจะไปงานปาร์ตี้ได้ช้ามาก!
03. CSSMin
ปลั๊กอินนี้เทียบเท่ากับ CSS ของ Uglify เพียงแค่รับไฟล์ CSS ที่ระบุและย่อขนาดให้เล็กลง แน่นอนถ้าคุณจะใช้สิ่งนี้ร่วมกับปลั๊กอิน Sass คุณต้องแน่ใจว่างานนี้ทำงานหลังจากงาน Sass
มีทางเลือกมากมายสำหรับ CSSMin ซึ่งสามารถลดขนาดไฟล์ CSS ของคุณโดยใช้เทคนิคที่แตกต่างกันเล็กน้อย CSS nano, CSS wring, CSS ลดขนาด ฯลฯ อ่านเกณฑ์มาตรฐานที่มีประโยชน์นี้หากคุณเป็นคนประเภทนั้น
04. คอนแคท
ตามชื่อที่แนะนำปลั๊กอินนี้ใช้เพียงหลายไฟล์และเชื่อมต่อเป็นไฟล์เดียว เช่นเดียวกับการย่อขนาดไฟล์การต่อไฟล์เป็นแนวทางปฏิบัติที่ดีที่สุดในยุคเก่าเพื่อลดเวลาในการโหลดหน้าเว็บ
ควรใช้การต่อไฟล์ในการใช้งานจริงสำหรับทั้ง JavaScript และ CSS โดยปกติจะเป็นงานสุดท้ายที่จะรัน - หลังจากงานประมวลผลล่วงหน้า CSS และงานลดขนาด เป็นเรื่องง่ายที่จะบอกให้ปลั๊กอินนี้เชื่อมต่อไฟล์ทั้งหมดในไดเร็กทอรีเฉพาะ แต่ระวังลำดับที่ไฟล์จะถูกต่อกัน - คุณอาจต้องระบุลำดับที่เจาะจงหรือตั้งชื่อไฟล์เพื่อให้ไฟล์เหล่านั้นเชื่อมต่อกันตามลำดับที่คุณต้องการเสมอ .
05. อิมเมจมิน
ในรูปแบบเดียวกับ CSSMin และ Uglify ImageMin จัดการกับปัญหาเก่าแก่อีกประการหนึ่งสำหรับการโหลดหน้าเว็บ - ขนาดไฟล์รูปภาพ "การลดขนาดรูปภาพ" โดยปกติจะเป็นพอร์ตแรกสำหรับการเพิ่มประสิทธิภาพดังนั้นปลั๊กอินนี้จึงจำเป็นอย่างยิ่งที่จะต้องลดขนาดไฟล์หน้าทั้งหมดลงให้มากที่สุด
หากคุณกำลังทำงานกับ JPG, PNG, GIF หรือ SVG (รูปแบบภาพเวกเตอร์ที่เป็นที่นิยมมากขึ้นเรื่อย ๆ ) ปลั๊กอินนี้จะช่วยลดขนาดไฟล์รูปภาพของคุณโดยไม่ต้องยกนิ้วให้ หากคุณมีรูปภาพจำนวนมากในโปรเจ็กต์ของคุณคุณควรเรียกใช้งานนี้เมื่อคุณกำลังผลักดันไปสู่การผลิตเท่านั้นแทนที่จะเรียกใช้งานนี้ในกิจกรรมนาฬิกา (ดูข้อถัดไป)
06. ชม
ปลั๊กอินนี้ไม่มีผลกับส่วนหน้าเว็บไซต์ของคุณ แต่มีประโยชน์อย่างยิ่งในการสร้างกระบวนการ Grunt ที่มีประสิทธิภาพ Watch เพียงแค่จับตาดูไดเรกทอรีใด ๆ ที่คุณระบุและเมื่อมีการเปลี่ยนแปลงบางอย่างมันจะทริกเกอร์งาน Grunt บางอย่างโดยอัตโนมัติ
ดังนั้นคุณสามารถตั้งค่าเงื่อนไขการเฝ้าดูหนึ่งรายการในไดเรกทอรี "js" ของคุณเพื่อเรียกใช้งาน JavaScript ของคุณและอีกเงื่อนไขหนึ่งในไดเรกทอรี "css" เพื่อเรียกใช้งาน CSS ของคุณ ซึ่งหมายความว่าคุณจะไม่ต้องเรียกใช้กระบวนการ Grunt หลักด้วยตนเองอีกต่อไป! เพียงเริ่มต้นงานการเฝ้าดูที่ไม่พอใจก่อนที่คุณจะเริ่มทำการเปลี่ยนแปลงและคุณจะลืมมันไปได้เลย
คำ: เจมี่โล่
Jamie Shields เป็นนักพัฒนาส่วนหลังของ Stickyeyes ซึ่งเป็นหน่วยงานการตลาดดิจิทัล
แบบนี้? อ่านนี่!
- Grunt vs Gulp: เครื่องมือสร้าง JavaScript ใดที่คุณควรเลือก?
- 8 วิธีในการปรับปรุงการตั้งค่า Grunt ของคุณ
- ธีม WordPress ฟรีที่ดีที่สุด
