iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

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

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

除了 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

小結

今天介紹了圖片壓縮的處理。明天會談到,如何在一般開發環境時不壓縮檔案、而是在生產環境時才壓縮檔案,以節省編譯的時間。

參考資料

npm

其他


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day26 JS 的處理:談 gulp-uglify
下一篇
[試著把切版專案升級到 gulp4.0 吧] Day28 在生產環境時才壓縮檔案
系列文
試著把切版專案升級到 gulp4.0 吧36

尚未有邦友留言

立即登入留言