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

#Node.js #Gulp #Gulp 4 #這是在講 Gulp 不是飲料是任務自動化工具這件事

前言

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

安裝 gulp-image

首先當然要先安裝 gulp-image

1	`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 看看吧

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

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

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

前言

安裝 gulp-image

使用方式

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

安裝 gulp-image

使用方式

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：將 Gulp deploy(部屬) Heroku

這是在講 Gulp 不是飲料是任務自動化工具這件事：一個段落

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 ejs 篇

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 pug/jade 篇

分享這篇文章

留言