搭配 Grunt 使用 Imagemin

凱蒂漢佩尼斯
Katie Hempenius
X

設定 Imagemin Grunt 外掛程式

這個 Glitch 已包含 grunt、grunt-cli 和 grunt-contrib-imagemin 外掛程式。如要新增 Imagemin 設定，您必須編輯 gruntfile.js 檔案。

  • 按一下「Remix to Edit」，讓專案可供編輯。
  • 在 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}']} 會比對 images/ 目錄中的所有 JPEG 和 PNG 圖片。

  • 緊接在 grunt.registerTask(...) 前新增這一行，以載入 Imagemin 工作：
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • 最後，將 /* list plugins here */ 註解替換為 'imagemin'，將 Imagemin 新增為預設的 Grunt 工作。該行程式碼現在應如下所示：
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 是指定壓縮品質等級的外掛程式。我們已在 package.json 檔案中將 imagemin-pngquant 新增至這項專案，方便您用來壓縮 PNG。如要使用，請宣告外掛程式，並在 Gruntfile 中指定壓縮品質等級。

  • 將下列程式碼新增至 gruntfile.js 頂端，即可宣告 imagemin-pngquant 外掛程式：
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • 在 imagemin 物件中加入 options 屬性，新增壓縮 PNG 圖片的設定。該 options 屬性應如下所示：
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

這個程式碼會指示 Imagemin 使用 Pngquant 外掛程式壓縮 PNG 檔。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 圖片。

  • 在 gruntfile.js 頂端放置這行程式碼，即可宣告 imagemin-mozjpeg 外掛程式。
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']);

使用 Lighthouse 執行 Grunt 驗證結果

  1. 按一下「工具」按鈕。
  2. 接著按一下「Console」按鈕。
  3. 在主控台中輸入下列指令來執行 Grunt：
grunt

Grunt 完成後，控制台中應該會顯示以下訊息：

Minified 6 images (saved 667 kB - 66.5%)

太棒了！這些結果更好。

最後，建議您使用 Lighthouse 驗證剛所做的變更。Lighthouse 的「有效編碼圖片」效能稽核功能可讓您瞭解網頁上的 JPEG 圖片是否經過最佳壓縮。

  • 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。
  • 在 Glitch 的即時版本中執行 Lighthouse 效能稽核 (Lighthouse > 選項 > 效能)，並確認已通過「有效編碼圖片」稽核。

在 Lighthouse 中通過「有效編碼圖片」稽核

太好了，您已使用 Imagemin 以最佳方式壓縮網頁上的圖片。