gulp教程之gulp-imagemin壓縮圖片

gulp教程之gulp-imagemin壓縮圖片

簡介：
使用gulp-imagemin壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片），很多人安裝gulp-imagemin都會出現錯誤，我也查了很多資料，也不知道所以然，我的做法是出錯再重新安裝，如果你知道問題所在，請一定告訴我！

1、安裝nodejs/全局安裝gulp/本地安裝gulp/創建package.json和gulpfile.js文件

本示例目錄結構如下：

2、本地安裝gulp-imagemin

2.1、github：https://github.com/sindresorhus/gulp-imagemin
2.2、安裝：命令提示符執行 cnpm install gulp-imagemin –save-dev
2.3、注意：沒有安裝cnpm請使用 npm install gulp-imagemin –save-dev
2.4、說明：–save-dev 保存配置信息至 package.json 的 devDependencies 節點。

3、配置gulpfile.js

3.1、基本使用

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'));
});

3.2、gulp-imagemin其他參數

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

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

3.3、深度壓縮圖片

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'));
});

3.3、只壓縮修改的圖片。壓縮圖片時比較耗時，在很多情況下我們只修改了某些圖片，沒有必要壓縮所有圖片，使用”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'));
});

4、執行任務

4.1、命令提示符執行：gulp testImagemin