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à 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 Phối lại để chỉnh sửa để có thể 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ã này:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Khối mã này sẽ cho Grunt biết tệp nào nên được nén bằng Imagemin.

  • dynamic cho biết danh sách các tệp cần nén sẽ được nén động được tạo bằng cách 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 đó giờ đây sẽ có dạng như sau:
grunt.registerTask('default', ['imagemin']);

✔︎ Nhận phòng

Bây giờ, 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 của bạn

imagemin-pngquant là một trình bổ trợ giúp 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 package.json để bạn có thể dùng tệp này để nén các tệp PNG. Để sử dụng trình bổ trợ đó, hãy khai báo trình bổ trợ và chỉ định mức chất lượng nén trong Gruntfile 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 đầu trình bổ trợ gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Thêm 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 PNG bằng trình bổ trợ Pngquant. Chiến lược phát hành đĩa đơn 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, 1 là cao nhất. Để buộc tất cả hình ảnh được nén ở chất lượng 50%, 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']);

Nhưng còn tệp JPEG thì sao? Dự án này cũng có hình ảnh JPEG, vì vậy bạn nên chỉ định cách chúng cũng được nén.

Tuỳ chỉnh cấu hình Imagemin (tiếp theo)

Sử dụng trình bổ trợ imagemin-mozjpeg (bạn đã cài đặt sẵ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. Bây giờ, mảng đó 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 & xác minh kết quả bằng Lighthouse

  1. Nhấp vào nút Tools (Công cụ).
  2. Sau đó, 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 mà bạn vừa đã thực hiện. "Mã hoá hình ảnh hiệu quả" của Lighthouse Báo cáo kiểm tra hiệu suất sẽ cho phép bạn biết được liệu hình ảnh JPEG trên trang của bạn có được nén theo cách tối ưu không.

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình toàn màn hình.
  • Chạy công cụ kiểm tra hiệu suất Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) trên phiên bản trực tiếp của sự cố và xác minh rằng "Mã hoá hiệu quả hình ảnh" kiểm tra đã được thông qua.

Truyền "Mã hoá hình ảnh hiệu quả" kiểm tra trong Lighthouse

Thành công! Bạn đã sử dụng Imagemin để nén hình ảnh trên trang của bạn một cách tối ưu.