Thiết lập trình bổ trợ Imagemin Grunt
Nhiễu này đã chứa grunt
, grunt-cli
và trình bổ trợ grunt-contrib-imagemin
. Để thêm cấu hình cho Imagemin, bạn cần phải chỉnh sửa tệp gruntfile.js
.
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Trong
gruntfile.js
, hãy thay thế nhận xét//Add configuration here
bằng khối mã sau:
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
Khối mã này cho Grunt biết những tệp nào cần được nén bằng Imagemin.
dynamic
cho biết danh sách các tệp cần nén sẽ được tạo động bằng cách so khớp tên tệp với mẫu tệp được chỉ định.Mẫu tệp
{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
sẽ khớp với tất cả hình ảnh JPEG và PNG trong thư mụcimages/
.
- Tải tác vụ Imagemin bằng cách thêm dòng này ngay trước
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Cuối cùng, hãy thêm Imagemin làm tác vụ Grunt mặc định bằng cách thay thế nhận xét
/* list plugins here */
bằng'imagemin'
. Dòng đó bây giờ sẽ có dạng như sau:
grunt.registerTask('default', ['imagemin']);
✔︎ Nhận phòng
Lúc này, tệp gruntfile.js
hoàn chỉnh sẽ có dạng như sau:
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']);
Tuỳ chỉnh cấu hình Imagemin
imagemin-pngquant
là một trình bổ trợ để chỉ định mức chất lượng nén.
Chúng tôi đã thêm imagemin-pngquant
vào dự án này trong tệp package.json
để bạn có thể sử dụng tệp này nhằm nén PNG. Để sử dụng trình bổ trợ này, hãy khai báo trình bổ trợ và chỉ định mức chất lượng nén trong Gruntfile.
- Khai báo trình bổ trợ
imagemin-pngquant
bằng cách thêm dòng này vào đầugruntfile.js
:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- Thêm các chế độ cài đặt để nén hình ảnh PNG bằng cách thêm thuộc tính
options
vào đối tượngimagemin
. Thuộc tínhoptions
đó sẽ có dạng như sau:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
Mã này yêu cầu Imagemin nén các tệp PNG bằng trình bổ trợ Pngquant. Trường quality
sử dụng dải giá trị min
và max
để xác định mức nén – 0 là thấp nhất và 1 là cao nhất. Để buộc tất cả hình ảnh phải nén ở 50% chất lượng, hãy truyền 0.5
dưới dạng cả giá trị tối thiểu và tối đa.
✔︎ Nhận phòng
Bây giờ, tệp gruntfile.js
của bạn sẽ có dạng như sau:
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']);
Còn JPEG thì sao? Dự án cũng có hình ảnh JPEG, vì vậy, bạn cũng nên chỉ định cách nén các hình ảnh đó.
Tuỳ chỉnh cấu hình Imagemin (tiếp theo)
Sử dụng trình bổ trợ imagemin-mozjpeg
đã được cài đặt cho bạn để nén hình ảnh JPEG.
- Khai báo trình bổ trợ
imagemin-mozjpeg
bằng cách đặt dòng này ở đầugruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Tiếp theo, hãy thêm
mozjpeg({quality: 50})
vào mảng trong đối tượngoptions
. Mảng đó bây giờ sẽ có dạng như sau:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔︎ Nhận phòng
Bây giờ, tệp gruntfile.js
của bạn sẽ có dạng như sau:
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']);
Chạy Grunt và xác minh kết quả bằng Lighthouse
- Nhấp vào nút Công cụ.
- Sau đó, hãy nhấp vào nút Bảng điều khiển.
- Chạy Grunt bằng cách nhập lệnh sau vào bảng điều khiển:
grunt
Khi Grunt hoàn tất, bạn sẽ thấy một thông báo như sau trong bảng điều khiển:
Minified 6 images (saved 667 kB - 66.5%)
Thật tuyệt! Những kết quả này tốt hơn nhiều.
Cuối cùng, bạn nên sử dụng Lighthouse để xác minh những thay đổi vừa thực hiện. Quy trình kiểm tra hiệu suất "Mã hoá hình ảnh hiệu quả" của Lighthouse sẽ cho bạn biết hình ảnh JPEG trên trang của bạn đã được nén một cách tối ưu hay chưa.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
- Chạy bài kiểm tra hiệu suất của Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) trên phiên bản trực tiếp của Glitch và xác minh rằng bài kiểm tra "Mã hoá hình ảnh hiệu quả" đã được vượt qua.
Thành công! Bạn đã sử dụng Imagemin để nén hình ảnh trên trang một cách tối ưu.