Thiết lập trình bổ trợ Imagemin Gulp
Nhiễu này đã chứa gulp
, gulp-cli
và trình bổ trợ gulp-imagemin
.
Để thêm cấu hình cho Imagemin, bạn cần phải chỉnh sửa tệp gulpfile.js
.
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Trước tiên, hãy khởi chạy trình bổ trợ
gulp-imagemin
bằng cách thêm mã này vào đầugulpfile.js
:
const imagemin = require('gulp-imagemin');
- Tiếp theo, hãy thay thế nhận xét
//Add tasks here
tronggulpfile.js
bằng khối mã sau:
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
Mã này thêm một tác vụ Gulp sử dụng Imagemin để nén hình ảnh trong thư mục images/
. Các hình ảnh gốc sẽ bị ghi đè và lưu trong cùng một thư mục images/
.
✔︎ Nhận phòng
Bây giờ, tệp gulpfile.js
của bạn sẽ có dạng như sau:
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
});
Bây giờ, bạn có một gulpfile.js
có thể dùng để nén hình ảnh.
Chạy Gulp
- 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 Gulp để nén hình ảnh của bạn bằng cách nhập lệnh sau vào bảng điều khiển:
gulp
Khi Gulp hoàn tất, bạn sẽ thấy thông báo như sau trong thiết bị đầu cuối:
gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)
Kích thước tệp cải thiện được 15% là một khởi đầu tốt; tuy nhiên, bạn có thể cải thiện thêm bằng cách sử dụng các chế độ cài đặt nén khác nhau.
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 gulpfile của bạn.
- Khai báo trình bổ trợ
imagemin-pngquant
bằng cách thêm dòng này vào đầugulpfile.js
:
const pngquant = require('imagemin-pngquant');
- Thêm trình bổ trợ
imagemin-pngquant
(và các chế độ cài đặt của trình bổ trợ đó) bằng cách truyền mảng sau đây đếnImageminPlugin()
:
[pngquant({quality: [0.5, 0.5]})]
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 gulpfile.js
của bạn sẽ có dạng như sau:
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]})
]))
.pipe(gulp.dest('images/'))
});
Còn JPG thì sao? Dự án cũng có hình ảnh JPG; các hình ảnh này cũng cần được nén.
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 JPG.
- Khai báo trình bổ trợ
imagemin-mozjpeg
bằng cách đặt dòng này lên đầugulpfile.js
.
const mozjpeg = require('imagemin-mozjpeg');
- Tiếp theo, hãy thêm
mozjpeg({quality: 50})
vào mảng được chuyển đếnImageminPlugin()
:
[
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
✔︎ Nhận phòng
Bây giờ, tệp gulpfile.js
của bạn sẽ có dạng như sau:
const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]))
.pipe(gulp.dest('images/'))
});
Chạy lại Gulp và xác minh kết quả bằng Lighthouse
- Chạy lại Gulp:
gulp
Khi Gulp hoàn tất, bạn sẽ thấy thông báo như sau trong dòng lệnh:
gulp-imagemin: 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 có thể cho bạn biết liệu 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.