图片压缩工具之grunt-contrib-imagemin
对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小,加快页面访问速度。Google Pagespeed最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩,如果是 PNG 格式,则使用 OptiPNG 或 PNGOUT 压缩。
但是对于不同格式的图片,我们需要用pegtran/jpegoptim/OptiPNG/PNGOUT 等多种工具来分别压缩,这样对于前端开发费时费力,grunt-contrib-imagemin封装了这些压缩功能;大大方便了我们优化的工作。下面我们来看下如何使用。
1、首先要安装node.js和grunt~node.js的安装这里不再赘述~几乎就是在官网点击下载后一路next~
(以windows为例)安装完node.js后~在命令行输入npm install grunt-cli -g 安装grunt
2、然后安装grunt-contrib-imagemin~安装命令为:npm install grunt-contrib-imagemin --save-dev
这里我进入了grunt-cli文件夹再安装grunt-contrib-imagemin的
3、然后我们配置Gruntfile.js~默认路径存放在C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli下
配置代码为:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: 1 //定义 PNG 图片优化水平
},
files: [{
expand: true,
cwd: 'e:/imgs/',//原图存放的文件夹
src: ['**/*.{png,jpg,jpeg,gif}'], // 优化 img 目录下所有 png/jpg/jpeg/gif图片
dest: 'e:/imgs/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
}]
}
},
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('img', ['imagemin']);
};
根据上面的配置~我们在e盘下新建一个imgs文件夹~用以存放待优化的图像~之后cd到C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli位置~输入grunt imagemin就会看到如下所示的运行界面:(我事先放了3幅图)
然后就去看看imgs文件夹下各种格式的图片是不是都被压缩了呢~~
图片压缩工具之grunt-contrib-imagemin的更多相关文章
- ImageOptim 图片压缩工具
下载地址:http://www.onlinedown.net/soft/175501.htm 下载地址(官网):http://imageoptim.com ImageOptim 图片压缩工具,能够 ...
- 用C#开发一个WinForm版的批量图片压缩工具
我们在实际项目开发过程中,曾经遇到过一个需求,就是要开发一个对大量图片进行整理(删除掉一些不符合要求的图片).归类(根据格式进行分类,比如jpg格式.bmp格式等).压缩(因为有的图片很大很占空间,看 ...
- Android图片压缩工具MCompressor
这是一个简单的图片压缩工具(MCompressor),可自定义压缩的格式和质量,以及压缩后存储的文件路径,可决定对多大的文件进行压缩. 使用方法 build.gradle文件 Step 1. Add ...
- Xcode插件路径、缓存路径、图片压缩工具路径、代码片段路径、symbolicatecrash路径
Xcode插件路径 ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins Xcode缓存路径 ~/Library/Devel ...
- 尝试用python开发一款图片压缩工具1:尝试 pillow库
开发目的 我经常使用图片.公众号文章发文也好,还是生活中要使用素材.图片是一种比文字更加直观的载体.但是图片更加占用带宽,很多软件都对图片有大小限制.图片太大也会影响加载速度.我试过几款图片压缩工具, ...
- python 开发一款图片压缩工具(四):上传图床
上一篇使用了 pngquant 图片压缩工具进行压缩,并通过 click 命令行工具构建了 picom 包.这篇的主要功能是实现图片上传. 图片上传功能的实现 通过 pngquant 压缩图片后,得到 ...
- java图片压缩工具类(指定压缩大小)
1:先导入依赖 <!--thumbnailator图片处理--> <dependency> <groupId>net.coobird</groupId> ...
- 手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
前言 图片压缩对于我们日常生活来讲,是非常实用的一项功能.有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩.那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的.效果展 ...
- 开发一款图片压缩工具(二):使用 pngquant 实现图片压缩
上一篇我尝试使用了 pillow 库对 png 图片进行了压缩,效果不好.这次我换用 pngquant 来压缩.pngquant 是用于 PNG 图像有损压缩的命令行实用程序和库.压缩程序会显著减小文 ...
随机推荐
- java继承 子类重写父类方法
package com.addd; //多态 public class Sld { private String name = "zhangsan"; public Sld() { ...
- linux yum 脚本实现
yum 位于linux /usr/bin/yum yum命令是python脚本进行编写的(python 2.6) #!/usr/bin/python2.6 import sys try: import ...
- 将Windows下磁盘出现黑色为分配区域变成绿色区域
在windows下不知什么原因, 有一块磁盘空间F盘就变成了黑色为分配区域. 黑色区域无法用来安装双系统, 网上查阅资料后, 找到了如何将他重新变回绿色区域的2个方法(方法二是自己无意操作成功的). ...
- Ubuntu 开启telnet、ftp服务
Telnet 这里我们就来对Ubuntu Linux telnet的安装设置进行一下讲解. 1. sudo apt-get install xinetd telnetd 2. Ubuntu Linux ...
- 玩school 学习sql server 查询的网站
http://www.w3school.com.cn/sql/sql_like.asp
- Java堆初始大小的建议值
摘自:<Java Performance>第三章 Initial Heap Space Size Configuration This section describes how to u ...
- tomcat 三种部署方式以及server.xml文件的几个属性详解
一.直接将web项目文件件拷贝到webapps目录中 这是最常用的方式,Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.如果你想要修改这个默认 ...
- Shell编程进阶 2.2 shell数组
给一个字符指定一个数组 怎么显示数组 a= echo $a a=( ) echo $a echo ${a[@]} echo ${a[*]} 指定显示数组中第几个数字 echo ${a[]} echo ...
- LAMP 3.5 mysql备份与恢复
备份库的命令 mysqldump -uroot -pwangshaojun discuz > /data/discuz.sql 指定用户密码,重定向到某文件 恢复 mysql -uroot -p ...
- js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...