設定 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 驗證結果
- 按一下「工具」按鈕。
- 接著按一下「Console」按鈕。
- 在主控台中輸入下列指令來執行 Grunt:
grunt
Grunt 完成後,控制台中應該會顯示以下訊息:
Minified 6 images (saved 667 kB - 66.5%)
太棒了!這些結果更好。
最後,建議您使用 Lighthouse 驗證剛所做的變更。Lighthouse 的「有效編碼圖片」效能稽核功能可讓您瞭解網頁上的 JPEG 圖片是否經過最佳壓縮。
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
- 在 Glitch 的即時版本中執行 Lighthouse 效能稽核 (Lighthouse > 選項 > 效能),並確認已通過「有效編碼圖片」稽核。
太好了,您已使用 Imagemin 以最佳方式壓縮網頁上的圖片。