对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小,加快页面访问速度。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的更多相关文章

  1. ImageOptim 图片压缩工具

    下载地址:http://www.onlinedown.net/soft/175501.htm 下载地址(官网):http://imageoptim.com ​ ImageOptim 图片压缩工具,能够 ...

  2. 用C#开发一个WinForm版的批量图片压缩工具

    我们在实际项目开发过程中,曾经遇到过一个需求,就是要开发一个对大量图片进行整理(删除掉一些不符合要求的图片).归类(根据格式进行分类,比如jpg格式.bmp格式等).压缩(因为有的图片很大很占空间,看 ...

  3. Android图片压缩工具MCompressor

    这是一个简单的图片压缩工具(MCompressor),可自定义压缩的格式和质量,以及压缩后存储的文件路径,可决定对多大的文件进行压缩. 使用方法 build.gradle文件 Step 1. Add ...

  4. Xcode插件路径、缓存路径、图片压缩工具路径、代码片段路径、symbolicatecrash路径

    Xcode插件路径 ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins   Xcode缓存路径 ~/Library/Devel ...

  5. 尝试用python开发一款图片压缩工具1:尝试 pillow库

    开发目的 我经常使用图片.公众号文章发文也好,还是生活中要使用素材.图片是一种比文字更加直观的载体.但是图片更加占用带宽,很多软件都对图片有大小限制.图片太大也会影响加载速度.我试过几款图片压缩工具, ...

  6. python 开发一款图片压缩工具(四):上传图床

    上一篇使用了 pngquant 图片压缩工具进行压缩,并通过 click 命令行工具构建了 picom 包.这篇的主要功能是实现图片上传. 图片上传功能的实现 通过 pngquant 压缩图片后,得到 ...

  7. java图片压缩工具类(指定压缩大小)

    1:先导入依赖 <!--thumbnailator图片处理--> <dependency> <groupId>net.coobird</groupId> ...

  8. 手把手教你实现一个图片压缩工具(Vue与Node的完美配合)

    前言 图片压缩对于我们日常生活来讲,是非常实用的一项功能.有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩.那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的.效果展 ...

  9. 开发一款图片压缩工具(二):使用 pngquant 实现图片压缩

    上一篇我尝试使用了 pillow 库对 png 图片进行了压缩,效果不好.这次我换用 pngquant 来压缩.pngquant 是用于 PNG 图像有损压缩的命令行实用程序和库.压缩程序会显著减小文 ...

随机推荐

  1. 断路器之一:Hystrix 使用与分析

    一:为什么需要Hystrix? 在大中型分布式系统中,通常系统很多依赖(HTTP,hession,Netty,Dubbo等),如下图: 在高并发访问下,这些依赖的稳定性与否对系统的影响非常大,但是依赖 ...

  2. 西安电子科技大学第16届程序设计竞赛 G-小国的复仇

    西安电子科技大学第16届程序设计竞赛网络同步赛 G-小国的复仇 2 链接:https://www.nowcoder.com/acm/contest/107/G来源:牛客网 题目描述 众所周知,汀老师是 ...

  3. Java学习之数据的时间及热度属性

    背景:在JAVA开发的电商网站中都有海量商品信息,绝大部分电商网站都有为了让用户尽快的获取到想要的商品提供流行商品和推荐商品的概念,我的理解是从两个方面反映了商品的时间维度和热度:流行商品是指横向所有 ...

  4. 手机定位室内gps没信号

    手机定位一般分3种,gps,手机信号基站,上网地点,其中gps信号一般只有户外有,所以在室外的时候只开启定位和gps就可以定位了,但是在室内没有gps的情况,就需要开网络定位了.

  5. Celery-4.1 用户指南: Canvas: Designing Work-flows(设计工作流程)

    签名 2.0 版本新特性. 刚刚在calling 这一节中学习了使用 delay 方法调用任务,并且通常这就是你所需要的,但是有时候你可能想将一个任务调用的签名传递给另外一个进程或者作为另外一个函数的 ...

  6. java反射专题二

    一丶Class中常用方法详解 1)getFields() 只能获取到运行时类中及其父类中声明为public的属性 2)getDeclaredFields() 获取运行时类本身声明的所有属性 3)get ...

  7. Android Fragment用法详解(1)--静态使用Fragment

    先说明一下,本例子是运行在Android Studio下面的.同样的代码复制粘贴到Eclipse运行却会报错.具体原因我也没有细查.知道的哥们,留言通知下呗. Fragment,也就是碎片,本意是为了 ...

  8. Serializable 和 parcelable的实现和比较

    首先这个两个接口都是用来序列化对象的 但是两者在性能和应用场合上有区别,parcelable的性能更好,但是在需要保存或者网络传输的时候需要选择Serializable因为parcelable版本在不 ...

  9. vray学习笔记(3)-多维子材质是个什么东西

    多维子材质是个什么东西?为什么出现这个概念? 在3dsmax官方网站,我们可以看到它的定义: The Multi/Sub-Object material lets you assign differe ...

  10. ConcurrentHashMap的putIfAbsent

    这个方法在key不存在的时候加入一个值,如果key存在就不放入,等价: if (!map.containsKey(key)) return map.put(key, value); else retu ...