Sử dụng Imagemin với Grunt

Katie Hempenius
Katie Hempenius
X

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ục images/.

  • 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 đầu gruntfile.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ượng imagemin. Thuộc tính options đó 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 ở đầu gruntfile.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ượng options. 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

  1. Nhấp vào nút Công cụ.
  2. Sau đó, hãy nhấp vào nút Bảng điều khiển.
  3. 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 (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.

Vượt qua quy trình kiểm tra "Mã hoá hình ảnh hiệu quả" trong Lighthouse

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.