這是在講 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

0%