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" 目錄和目標文件。未完待續。。