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

前言

前面講了 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

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

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