【Gulp】壓縮圖片並優化

gulp-imagemin

在專案中打開終端機安裝gulp-imagemin套件(版本@7.1.0)

1

$ npm install gulp-imagemin@7.1.0

在gulpfile.js新增程式碼

1
2
3
4
5
6
7
8
9


const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('imagemin', function(){
  return gulp
    .src('src/images/**/*.*', { encoding: false })
    .pipe(imagemin()) //執行優化(壓縮)
    .pipe(gulp.dest('dist/img'));
});

{ encoding: false }多增加這行，可以確保圖片不會被以編碼方式處理

在終端機執行指令

1

$ gulp imagemin

執行後會自動壓縮img裡的圖片，到dist裡的img資料夾裡

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


you project
├─── node_modules/    
├─── dist/
│     └─── img/
│           │
│           └─── logo.svg     # 壓縮過的
│ 
├─── src/
│     └─── img/
│           │
│           └─── logo.svg     # 未壓縮過的
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json   

回到gulpfile.js設定其他屬性

imagemin-mozjpeg設定JPEG圖片
- quality: 壓縮品質
  - 0: 壓縮最大，品質最差
  - 75: 預設值
  - 100: 無壓縮，品質最好
- progressive: 布林值，圖像在加載時會先顯示模糊的預覽，然後逐漸增加清晰度(預設值true)
imagemin-optipng: 設定PNG圖片的
- optimizationLevel: 優化級別
  - 0: 沒有優化
  - 1: 基本的優化，移除不必要的元數據
  - 2: 輕微的優化，更進一步優化掃描線過濾和設置標誌(預設值)
  - 3: 預設級別，包括輕微的壓縮，但不會影響圖片品質
  - 4: 更進一步的壓縮和剝離
  - 5: 更強的壓縮和剝離
  - 6: 最強的壓縮，可能會稍微影響圖片品質
  - 7: 最強的壓縮，可能會明顯影響圖片品質
imagemin-gifsicle: 設定GIF圖片
- interlaced: 布林值，先顯示大致輪廓，然後逐漸填充細節(預設值false)
imagemin-svgo: 設定SVG圖片
- plugins: 陣列，自訂應用的優化插件:
  - cleanupIDs: 布林值，用於控制是否清理SVG中的無用的ID(預設值true)
  - removeViewBox: 布林值，用於控制是否刪除SVG中的viewBox屬性(預設值true)
  - removeUselessStrokeAndFill: 布林值，用於刪除無用的stroke和fill屬性(預設值true)
  - removeDimensions: 布林值，用於刪除SVG中的width和height屬性(預設值false)
  - removeUselessDefs: 布林值，用於刪除SVG中無用的元素(預設值true)
  - convertColors: 布林值，用於嘗試將顏色值轉換為合適的CSS顏色名稱如果適用(預設值true)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('imagemin', function(){
  return gulp
    .src('src/images/**/*.*', { encoding: false })
    .pipe(
      imagemin([
        imagemin.mozjpeg({
          quality: 80, //壓縮品質
        }),
        imagemin.optipng({
          optimizationLevel: 1 //優化級別
        }),
        imagemin.gifsicle({
          interlaced : true //漸進式渲染
        }),
        imagemin.gifsicle()
      ])
    )
    .pipe(gulp.dest('dist/img'));
});

gulp.task('default', gulp.series('imagemin'));

【補充】安裝gulp-newer套件：只針對新加入的檔案做動作

$ npm install gulp-newer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const newer = require('gulp-newer');

gulp.task('imagemin', function(){
  return gulp
    .src('src/images/**/*.*', { encoding: false })
    .pipe(newer('dist/img')) //監控有新圖片時才會做處理
    .pipe(
      imagemin([
        imagemin.mozjpeg({
          quality: 80, 
        }),
        imagemin.optipng({
          optimizationLevel: 1 
        }),
        imagemin.gifsicle({
          interlaced : true
        }),
        imagemin.gifsicle()
      ])
    )
    .pipe(gulp.dest('dist/img'));
});

gulp.task('default', gulp.series('imagemin'));

最後，在終端機執行gulp即可完成任務

1

$ gulp

gulp

【Gulp】壓縮圖片並優化

node.js、npm、gulp、gulpfile、package.json、gulp-imagemin

【Gulp】壓縮圖片並優化

node.js、npm、gulp、gulpfile、package.json、gulp-imagemin

gulp-imagemin

其他相關