gulp常用插件-gulp-imagemin

使用

gulp-imagemin

壓縮圖檔檔案（包括PNG、JPEG、GIF和SVG圖檔）。

github：https://github.com/sindresorhus/gulp-imagemin

配置

gulpfile.js

例子一

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});
           

例子二

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: , //類型：Number  預設：3  取值範圍：0-7（優化等級）
            progressive: true, //類型：Boolean 預設：false 無損壓縮jpg圖檔
            interlaced: true, //類型：Boolean 預設：false 隔行掃描gif進行渲染
            multipass: true //類型：Boolean 預設：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('dist/img'));
});
           

更多的參數：https://github.com/sindresorhus/gulp-imagemin#user-content-options

例子三

深度壓縮圖檔

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //確定本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant()] //使用pngquant深度壓縮png圖檔的imagemin插件
        }))
        .pipe(gulp.dest('dist/img'));
});
           

例子四

隻壓縮修改的圖檔。壓縮圖檔時比較耗時，在很多情況下我們隻修改了某些圖檔，沒有必要壓縮所有圖檔，使用”

gulp-cache

”隻壓縮修改的圖檔，沒有修改的圖檔直接從緩存檔案讀取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    //確定本地已安裝gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});
           

指令提示符執行：

gulp testImagemin