gulp教程之gulp-imagemin(gulp-imagemin压缩图片文件)
原文:http://www.ydcss.com/archives/26
简介:
使用gulp-imagemin压缩图片文件(包括PNG、JPEG、GIF和SVG图片),很多人安装gulp-imagemin都会出现错误,我也查了很多资料,也不知道所以然,我的做法是出错再重新安装,如果你知道问题所在,请一定告诉我!
1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件
1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程
1.2、本示例目录结构如下:
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
什么是cnpm,如何安装?
2.4、说明:--save-dev
保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?
3、配置gulpfile.js
3.1、基本使用
1
2
3
4
5
6
7
8
|
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其他参数 具体参看
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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、深度压缩图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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
转载于:https://www.cnblogs.com/HendSame-JMZ/articles/6183050.html
gulp教程之gulp-imagemin(gulp-imagemin压缩图片文件)相关推荐
- gulp教程之gulp-imagemin压缩图片
简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片),很多人安装gulp-imagemin都会出现错误,我也查了很多资料,也不知道所以然,我的做法是出错再重新 ...
- gulp教程之gulp-minify-css【gulp-clean-css】
原文:http://www.ydcss.com/archives/41 简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-min ...
- gulp教程之gulp-uglify
本文链接:http://www.ydcss.com/archives/54 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目 ...
- 宝塔数据盘满了,怎么办?linux批量压缩图片文件,2步完成压缩
问题: 问题分析: 登录服务器,先看下文件大小,哪些占用比较大.(演示系统为 centos 7.9) du -h --max-depth=1 #查找当前目录下文件大小 效果如下, 然后逐级查看,直到确 ...
- gulp教程之gulp-htmlmin压缩html
我们可以使用gulp-htmlmin压缩html,可以压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作. 本地安装gulp-htmlmin 安装:命令提示符执行 cnpm ...
- gulp教程之gulp-concat
简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 本示 ...
- gulp教程之gulp-autoprefixer
现在浏览器的种类很多,不同浏览器的内核不同,同一浏览器也有很多不同的版本,很多css属性为了兼容浏览器需要加上特定的前缀,比如chrome的前缀是-webkit-,firefox前缀是-moz-等. ...
- 续Gulp使用入门三步压缩图片
gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...
- python批量压缩图片_Python图片批量压缩到指定大小并将JPG转为PNG格式
背景: 待压缩的图片大小有几十KB到近10M大小不等,且绝大部分图片为JPG格式.这些待压缩图片放在picture文件夹下 以及picture文件夹下的子文件夹中 现需要将picture文件夹下这些图 ...
最新文章
- MySQL修改字符集
- SpringBoot 集成 mybatisPlus
- Lovesource博士:或者我是如何学会不再担心和热爱开放的
- GiHub创建项目仓库与上传项目,超详细思维导图
- php静态stitac,php静态static介绍
- 英语总结系列(三):如何维持激情
- 不同操作系统下重置root密码的方法
- 手把手教你用Python实现人脸识别,辨别真假!
- INNO SETUP卸载程序中加入自定义窗体
- 367.有效的完全平方数 (力扣leetcode) 博主可答疑该问题
- 中兴2016笔试题答案Java_中兴笔试题和面试题答案与答案
- android c callstack,[MTK] 如何在android native code 打callstack
- 科技爱好者周刊(第 181 期):移动支付应该怎么设计?
- 关于2020计算机考研。
- 本地上运行正常,但是部署到了服务器却一直验证码错误(Nginx反向代理导致的session丢失问题)
- 淘宝API item_search_similar - 搜索相似的商品
- 这款必应出品的壁纸软件也太棒了
- 启动定时器t0的工作指令是_80c51单片机定时器t0工作于方式1定时时间1ms当晶振为6mhz时求计数初值为多少...
- 用Python做一个会旋转的五彩风筝
- 2015羊年主流手机配置什么样?
热门文章
- mysql 禁用密码规则校验
- C# Linq获取两个List或数组的差集交集
- 和菜鸟一起学c++之虚函数
- 终于开通我自己的cnblogs了,自我恭喜下··
- 让所有中国人看了气氛的广东某学校捐款过程
- diff patch制作补丁打补丁
- Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
- taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题
- python快速整理excel_使用pandas包用python清理excel数据
- movielens推荐系统_浅谈推荐系统+3个小时上手python实现(完整代码)