ตั้งค่าปลั๊กอิน Imagemin Grunt
กลิทช์นี้มี grunt
, grunt-cli
และปลั๊กอิน grunt-contrib-imagemin
แล้ว หากต้องการเพิ่มการกำหนดค่าสำหรับ Imagemin คุณจะต้องแก้ไขไฟล์ gruntfile.js
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- ใน
gruntfile.js
ให้แทนที่ความคิดเห็น//Add configuration here
ด้วยโค้ดบล็อกต่อไปนี้
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
โค้ดบล็อกนี้จะบอก Grunt ว่าควรบีบอัดไฟล์ใดด้วย Imagemin
dynamic
บ่งชี้ว่าระบบจะสร้างรายการไฟล์ที่จะบีบอัดแบบไดนามิกโดยการจับคู่ชื่อไฟล์กับรูปแบบไฟล์ที่ระบุรูปแบบไฟล์
{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
จะตรงกับรูปภาพ JPEG และ PNG ทั้งหมดในไดเรกทอรีimages/
- โหลดงาน Imagemin โดยเพิ่มบรรทัดนี้ก่อน
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- สุดท้าย ให้เพิ่ม Imagemin เป็นงาน Grunt เริ่มต้นโดยแทนที่ความคิดเห็นใน
/* list plugins here */
ด้วย'imagemin'
บรรทัดดังกล่าวควรมีลักษณะดังนี้
grunt.registerTask('default', ['imagemin']);
✔︎ เช็คอิน
ไฟล์ gruntfile.js
ที่สมบูรณ์ควรมีลักษณะดังนี้
const grunt = require('grunt')
grunt.initConfig({
imagemin: {
dynamic: {
files: [{
cwd: 'images/'
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
ปรับแต่งการกําหนดค่า Imagemin
imagemin-pngquant
เป็นปลั๊กอินสำหรับระบุระดับคุณภาพการบีบอัด
เราได้เพิ่ม imagemin-pngquant
ในโปรเจ็กต์นี้ในไฟล์ package.json
แล้ว เพื่อให้คุณใช้บีบอัด PNG ได้ หากต้องการใช้งาน ให้ประกาศปลั๊กอิน
และระบุระดับคุณภาพการบีบอัดใน Gruntfile
- ประกาศปลั๊กอิน
imagemin-pngquant
ด้วยการเพิ่มบรรทัดนี้ที่ด้านบนของgruntfile.js
:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- เพิ่มการตั้งค่าสำหรับการบีบอัดรูปภาพ PNG โดยการเพิ่มพร็อพเพอร์ตี้
options
ลงในออบเจ็กต์imagemin
พร็อพเพอร์ตี้options
ควรมีลักษณะดังนี้
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
โค้ดนี้จะบอกให้ Imagemin บีบอัด PNG โดยใช้ปลั๊กอิน Pngquant ช่อง quality
ใช้ช่วงค่า min
และ max
เพื่อกำหนดระดับการบีบอัด โดย 0 คือต่ำสุด และ 1 คือค่าสูงสุด หากต้องการบังคับให้บีบอัดรูปภาพทั้งหมดที่คุณภาพ 50% ให้ส่ง 0.5
เป็นทั้งค่าต่ำสุดและสูงสุด
✔︎ เช็คอิน
ไฟล์ gruntfile.js
ควรมีลักษณะดังนี้
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
imagemin: {
options: {
use: [
pngquant({quality: [0.5, 0.5]}),
]
},
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
แล้ว JPEG ล่ะ โปรเจ็กต์ยังมีรูปภาพ JPEG คุณจึงควรระบุวิธีบีบอัดรูปภาพด้วย
ปรับแต่งการกำหนดค่า Imagemin (ต่อ)
ใช้ปลั๊กอิน imagemin-mozjpeg
ซึ่งติดตั้งให้คุณแล้ว เพื่อบีบอัดรูปภาพ JPEG
- ประกาศปลั๊กอิน
imagemin-mozjpeg
โดยวางบรรทัดนี้ที่ด้านบนgruntfile.js
ของคุณ
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- จากนั้น เพิ่ม
mozjpeg({quality: 50})
ลงในอาร์เรย์ในออบเจ็กต์options
อาร์เรย์ควรมีลักษณะเช่นนี้
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔︎ เช็คอิน
ไฟล์ gruntfile.js
ควรมีลักษณะดังนี้
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
imagemin: {
options: {
use: [
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
},
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
เรียกใช้ Grunt และยืนยันผลลัพธ์ด้วย Lighthouse
- คลิกปุ่มเครื่องมือ
- จากนั้นคลิกปุ่มคอนโซล
- เรียกใช้ Grunt โดยพิมพ์คำสั่งต่อไปนี้ในคอนโซล:
grunt
เมื่อ Grunt เสร็จสมบูรณ์แล้ว คุณควรเห็นข้อความแบบนี้ในคอนโซล:
Minified 6 images (saved 667 kB - 66.5%)
ไชโย ผลลัพธ์เหล่านี้ดีขึ้นมาก
สุดท้าย ขอแนะนำให้ใช้ Lighthouse เพื่อตรวจสอบการเปลี่ยนแปลงที่คุณเพิ่งดำเนินการ การตรวจสอบประสิทธิภาพ "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ" ของ Lighthouse จะช่วยให้คุณทราบว่ารูปภาพ JPEG ในหน้าเว็บได้รับการบีบอัดอย่างมีประสิทธิภาพสูงสุดหรือไม่
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- เรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse (Lighthouse > ตัวเลือก > ประสิทธิภาพ) ใน Glitch เวอร์ชันที่เผยแพร่อยู่ และตรวจสอบว่าผ่านการตรวจสอบ "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ" แล้ว
สำเร็จ! คุณได้ใช้ Imagemin เพื่อบีบอัดรูปภาพบนหน้าเว็บอย่างเหมาะสมแล้ว