图片压缩工具之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文件夹下各种格式的图片是不是都被压缩了呢~~
最新文章
- 使用密码记录工具keepass来保存密码
- VS小技巧
- 前端学习资源(CSS+HTML5)
- 在Ribbon中,中文换行位置不对怎么办
- oracle sql 性能 优化
- QUI操作超时弹出登录窗口登录的处理方式
- [Neural Networks] Dropout阅读笔记
- java07循环结构
- haskell,lisp,erlang你们更喜欢哪个?
- dij算法为什么不能处理负权,以及dij算法变种
- IntelliJ IDEA 13.1.4新建java web项目
- 文件上传组件FileUpload 以及邮箱搭建JavaMail
- 使用intelliJ创建 spring boot + gradle + mybatis站点
- Git图形化界面客户端
- modelform的简介
- node api 之:fs
- Java多线程高级主题
- python 生成图表
- Codeforces Round #440 (Div. 2, based on Technocup 2018 Elimination Round 2) D. Something with XOR Queries
- 同时安装不同版本JDK遇到的问题
热门文章
- AngularJS:API
- Python类(三)-多继承的区别
- 如何同时打开两个UltraEdit
- delphi 组件安装工具开发
- Mysql Hive 通用的行列转换
- Android排错: has leaked window com.android.internal.policy.impl.PhoneWindow$ that was originally added here
- springmvc 中异常处理
- springmvc urlpattern配置详解
- day17-jdbc 7.Statement介绍
- C++面向对象类的实例题目八