gulp 插件之 gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp 插件之 gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache相关的知识,希望对你有一定的参考价值。
gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache 的简介:
gulp-imagemin 插件用来压缩图片文件(包括 png,jpeg,gif 和 svg 图片)。
imagemin-pngquant-gfw 插件用来深度压缩 png 格式图片文件。
gulp-cache 插件用来读取缓存文件。压缩图片可能会占用较长时间,使用 "gulp-cache" 插件可以减少重复压缩。
一、"gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache" 插件的使用
1、安装 “gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache”插件命令(在终端进入到项目根目录执行)
npm install --save-dev gulp-load-plugins gulp-imagemin gulp-cache imagemin-pngquant-gfw
2、在项目根目录下提供 "gulp-imagemin" 插件任务配置需要的 src 目录和源文件(源文件放置到 src 目录下)
mkdir src
3、在 gulpfile.js 文件中配置使用 "gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache"
具体示例:
// 只使用 gulp-imagemin 插件
var gulp = require(‘gulp‘),
plugins = require(‘gulp-load-plugins‘)(); // 装载插件
gulp.task(‘imagemin‘, function () { // 自定义 "imagemin" 任务
return gulp.src(‘src/images/*.{png,jpeg,gif}‘) // 模糊匹配 src/images 目录下所有图片文件
.pipe(plugins.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‘)); // 压缩后的文件存放路径
});
具体示例:
// 使用 "gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache" 插件
// 由于有些图片比较大,所以可以进行深度压缩,并且只压缩修改的图片,没修改就从缓存读取
var gulp = require(‘gulp‘),
pngquant = require(‘imagemin-pngquant-gfw‘),
plugins = require(‘gulp-load-plugins‘)(); // 装载插件
gulp.task(‘imagemin‘, function () { // 自定义 "imagemin" 任务
return gulp.src(‘src/images/*.{png,jpeg,gif}‘) // 模糊匹配 src/images 目录下所有图片文件
.pipe(plugins.cache(plugins.imagemin({
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 imagemin" 命令
PS:如果没有错误提示信息,证明就没什么问题了。现在去项目根目录下看是否生成 "dist/img" 目录和目标文件。未完待续。。
本文出自 “珞辰的博客” 博客,转载请与作者联系!
以上是关于gulp 插件之 gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache的主要内容,如果未能解决你的问题,请参考以下文章