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

前言

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

安裝 gulp-image

首先當然要先安裝 gulp-image

npm install --save gulp-image

使用方式

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

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

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

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

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