[試著把切版專案升級到 gulp4.0 吧] Day27 圖片壓縮處理：談 gulp-imagemin

第 11 屆 iThome 鐵人賽

DAY 27

Modern Web

試著把切版專案升級到 gulp4.0 吧系列第 27 篇

11th鐵人賽 gulp

ayugioh2003

2019-10-13 13:05:48

1979 瀏覽

分享至

除了 CSS、JS 檔需要壓縮外，圖片因為體積較大，所以更是需要壓縮。圖片壓縮除了用修圖軟體降低畫質外，也可以靠一些線上服務來作到。而在 gulp、webpack 等建構工具在世的現在，當然也有相對應的工具可以使用。在 gulp 中，其中一款就是 gulp-imagemin。

gulp-imagemin

一、安裝 gulp-imagemin

npm install --save-dev gulp-imagemin

二、在 gulpfile 以 $.imagemin() 來建立一個 task

import gulp from 'gulp'
const $ = require("gulp-load-plugins")()

export function imageMin() {
  return gulp
    .src("./source/images/*")
    .pipe($.imagemin())
    .pipe(gulp.dest("./public/images"))
}

三、在 CLI 中呼叫這個 task

呼叫這個 task 後，gulp-imagemin 會跟你說壓縮了多少圖片、以及體積被壓縮了多少。

> gulp imageMin

[13:00:11] Starting 'imageMin'...
[13:00:18] gulp-imagemin: Minified 17 images (saved 8.42 kB - 5.1%)
[13:00:18] Finished 'imageMin' after 6.74 s