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" 目录和目标文件。未完待续。。