gulp 插件之 gulp-imagemin，imagemin-pngquant-gfw 和 gulp-cache

gulp-p_w_picpathmin，p_w_picpathmin-pngquant-gfw 和 gulp-cache 的簡介：

            gulp-p_w_picpathmin 插件用來壓縮圖片文件（包括 png，jpeg，gif 和 svg 圖片）。

            p_w_picpathmin-pngquant-gfw 插件用來深度壓縮 png 格式圖片文件。

            gulp-cache 插件用來讀取緩存文件。壓縮圖片可能會佔用較長時間，使用 "gulp-cache" 插件可以減少重複壓縮。       

一、"gulp-p_w_picpathmin，p_w_picpathmin-pngquant-gfw 和 gulp-cache"  插件的使用

1、安裝 “gulp-p_w_picpathmin，p_w_picpathmin-pngquant-gfw 和 gulp-cache”插件命令（在終端進入到項目根目錄執行）

            npm install --save-dev  gulp-load-plugins gulp-p_w_picpathmin gulp-cache p_w_picpathmin-pngquant-gfw

2、在項目根目錄下提供 "gulp-p_w_picpathmin" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-p_w_picpathmin，p_w_picpathmin-pngquant-gfw 和 gulp-cache"

 具體示例：
// 只使用 gulp-p_w_picpathmin 插件
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();        // 裝載插件
      
gulp.task('p_w_picpathmin', function () {                        // 自定義 "p_w_picpathmin" 任務
    return gulp.src('src/p_w_picpaths/*.{png,jpeg,gif}')    // 模糊匹配 src/p_w_picpaths 目錄下所有圖片文件 
        .pipe(plugins.p_w_picpathmin({
                        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'));         // 壓縮後的文件存放路徑
});

具體示例：
// 使用 "gulp-p_w_picpathmin，p_w_picpathmin-pngquant-gfw 和 gulp-cache" 插件
// 由於有些圖片比較大，所以可以進行深度壓縮，並且只壓縮修改的圖片，沒修改就從緩存讀取
var gulp = require('gulp'),    
      pngquant = require('p_w_picpathmin-pngquant-gfw'),
      plugins = require('gulp-load-plugins')();        // 裝載插件
      
gulp.task('p_w_picpathmin', function () {                       // 自定義 "p_w_picpathmin" 任務
    return gulp.src('src/p_w_picpaths/*.{png,jpeg,gif}')   // 模糊匹配 src/p_w_picpaths 目錄下所有圖片文件 
        .pipe(plugins.cache(plugins.p_w_picpathmin({
                        progressive: true,         // 類型：Boolean 默認：false   無損壓縮 jpg 圖片
                        svgoPlugins: [{ removeViewBox: false }], // 不要移除 svg 圖片的 viewbox 屬性
                        use: [pngquant({                                      // 深度壓縮 png 格式圖片
                                    quality: '65-80',                            // 圖片品質
                                    speed: 4                                       // 壓縮速率
                        })]                                       
        })))
        .pipe(gulp.dest('dist/img'));         // 壓縮後的文件存放路徑
});

4、最後在終端運行 "gulp p_w_picpathmin" 命令

PS：如果沒有錯誤提示信息，證明就沒什麼問題了。現在去項目根目錄下看是否生成 "dist/img" 目錄和目標文件。未完待續。。