grunt-contrib-imagemin:图像压缩

安装插件:npm install grunt-contrib-imagemin --save-dev

参数

optimizationLevel(png)
类型:number
默认值:3
选择优化级别0到7。

progressive(jpg)
类型:boolean
默认:true
无损转换。

interlaced(gif)
类型:boolean
默认:true
交错的gif逐步呈现。

svgoPlugins(svg)
类型:array
默认:[]
定制使用哪个SVGO插件。

use
类型:array
默认:null
额外的插件与imagemin使用。

1.动态压缩文件夹内的图片

imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: //定义 PNG 图片优化水平
},
files: [{
expand: true,
cwd: 'img/',
src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
dest: 'img1/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
}]
}
}

2.静态压缩图片

imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: //定义 PNG 图片优化水平
},
files: {
'img1/1.jpg' : 'img/1.jpg',
'img1/2.jpg' : 'img/2.jpg'
}
}
}

grunt-contrib-imagemin 图像压缩的更多相关文章

  1. 初学grunt压缩

    初学grunt 压缩,做个记录.备忘. [JS压缩] 先比较yui compressor 与 uglify  代码压缩, yui compressor,使用起来很简单.需要jdk. https://g ...

  2. gulp和grunt的区别

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...

  3. Gulp vs Grunt 前端构建工具对比

    Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...

  4. 前端工程的构建工具对比 Gulp vs Grunt

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...

  5. 转:Gulp的目标是取代Grunt

    原文来自于:http://www.infoq.com/cn/news/2014/02/gulp Fractal公司积极参与了数个流行Node.js模块的开发,它最近发布了一个新的构建系统gulp,希望 ...

  6. Node开发项目管理工具 Grunt 对比 Gulp

    转自Gulp vs Grunt 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Mav ...

  7. Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin

    Photoshop 切出的图片,无论是 PNG 还是 JPEG/JPG 格式,都含有许多相关信息,又或多余的颜色值,这些信息和颜色值,对网页前端并没有用处,反而增加图片大小,所以 Google Pag ...

  8. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  9. Gulp使用指南

    Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更好阅读及维护. Glup使用node.js串流(streams)让 ...

  10. gulp自己主动化任务脚本在HybridApp开发中的使用

    眼下做前端开发的同学可能都熟悉grunt.fis之类的自己主动化构建工具.事实上在HybridApp开发中我们也能够使用这些工具来简化我们的工作.gulp就是一个比grunt,fis都先进的构建工具. ...

随机推荐

  1. 【Linux开发】linux设备驱动归纳总结(五):4.写个简单的LED驱动

    linux设备驱动归纳总结(五):4.写个简单的LED驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  2. java按某属性分组并计算相关属性的和。

    工作中在处理集合的时候会经常遇到需要分组然后计算某属性的和,在java8中,通过stream来操作集合,还是非常方便的,像过滤(filter).分组(group).获取单个属性的值,总而言之,简单方便 ...

  3. Java十大bug之——包冲突

    找bug就像破案,有的bug简单,有的bug复杂,还有的bug隐藏的令人难以发现. 一个逻辑上看起来一切都正常,结果确有问题,且怎么分析都感觉自己写的没问题的情况——包冲突 遇到这个bug最开始没有任 ...

  4. 多线程--CreateThread与_beginthreadex本质区别

    转载 MoreWindows: 秒杀多线程第二篇 本文将带领你与多线程作第一次亲密接触,并深入分析 CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程 ...

  5. spring依赖注入三种方式

    一.构造器注入 构造器注入是在程序中实现构造器,可以注入任意类型,如自定义类,集合,String等,注:构造器所有有final修饰的变量都必须在构造方法中注入. 二.设值注入(setter方式注入) ...

  6. B.super_log(The Preliminary Contest for ICPC Asia Nanjing 2019)

    同:https://www.cnblogs.com/--HPY-7m/p/11444923.html #define IOS ios_base::sync_with_stdio(0); cin.tie ...

  7. # vmware异常关机后,虚拟系统无法启动的解决办法

    vmware异常关机后,虚拟系统无法启动的解决办法 先使用everything搜索所有后缀为.lck的文件,这些文件全部删除,如果不确定是否可以删除,先把这些文件转移到桌面,等能启动虚拟系统之后再删除 ...

  8. predis操作redis方法大全

    //连接redis $redis = new Redis(); $redis->connect("127.0.0.1", 6379); //普通set/get操作 $redi ...

  9. python协程gevent案例:爬取斗鱼美女图片

    分析 分析网站寻找需要的网址 用谷歌浏览器摁F12打开开发者工具,然后打开斗鱼颜值分类的页面,如图: 在里面的请求中,最后发现它是以ajax加载的数据,数据格式为json,如图: 圈住的部分是我们需要 ...

  10. CentOS7部署Tomcat服务器

    1. 软件 存放路径:/usr/local/src apache-tomcat-9.0.22.tar.gz openjdk-12_linux-x64_bin.tar.gz 2.事先配置 启动后关闭防火 ...