這是在講 Gulp 不是飲料是任務自動化工具這件事：圖片壓縮篇

發表於 更新於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

前面講了 HTML、CSS、JS，可是這邊唯獨缺少圖片，所以這邊會講一下加入圖片的功能，但是基本上圖片很簡單，所以這章節就順便講講圖片壓縮

前言

前面講了 HTML、CSS、JS，可是這邊唯獨缺少圖片，所以這邊會講一下加入圖片的功能，但是基本上圖片很簡單，所以這章節就順便講講圖片壓縮

安裝 gulp-image

首先當然要先安裝 gulp-image

1
npm install --save gulp-image

使用方式

基本上都可以參照官方文件來做撰寫，但是要記得新增一個 task，然後這邊會需要再加入一個判斷環境的方式，所以要這樣寫

1
2
3
4
5
gulp.task('image',() => {
  return gulp.src('./src/img/**/*')
  .pipe($.if(options.env ==='prod', $.image()))
  .pipe(gulp.dest('./public/img/'));
});

非常的短不要懷疑，這邊我也準備好圖片及開好資料夾了

Image

廢話不多說，就直接輸入 gulp image --env prod 看看吧

Image

編譯過程會有點久，因為在針對圖片做壓縮，壓縮完畢後可以看到壓縮的比例

Image

Image