grunt-contrib-imagemin 图像压缩

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: 3 //定义 PNG 图片优化水平
    },
    files: [{
      expand: true,
      cwd: ‘img/‘,
      src: [‘**/*.{png,jpg,jpeg}‘], // 优化 img 目录下所有 png/jpg/jpeg 图片
      dest: ‘img1/‘ // 优化后的图片保存位置,覆盖旧图片,并且不作提示
    }]
  }
}

2.静态压缩图片

imagemin: {
  /* 压缩图片大小 */
  dist: {
    options: {
      optimizationLevel: 3 //定义 PNG 图片优化水平
    },
    files: {
      ‘img1/1.jpg‘ : ‘img/1.jpg‘,
      ‘img1/2.jpg‘ : ‘img/2.jpg‘
    }
  }
}
时间: 2024-07-31 14:47:49

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

前端自动化工具 grunt 插件 imagemin 的简单使用(六)

一.contrib-imagemin 插件的使用 1.安装 "grunt-contrib-imagemin "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-imagemin --save-dev 2.在项目根目录下提供 imagemin 插件任务配置需要的 src 目录和需要被压缩的图片文件(图片文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 imagemin 任务进行配置 // 包装函数mod

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

1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.2013年02月18日,Grunt v0.4.0 发布.F

gulp和grunt的区别

1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.2013年02月18日,Grunt v0.4.0 发布.F

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

转自Gulp vs Grunt 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.2013年02月18日,G

Gulp vs Grunt 前端构建工具对比

Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.201

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

Photoshop 切出的图片,无论是 PNG 还是 JPEG/JPG 格式,都含有许多相关信息,又或多余的颜色值,这些信息和颜色值,对网页前端并没有用处,反而增加图片大小,所以 Google Pagespeed 最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩,如果是 PNG 格式,则使用 OptiPNG 或 PNGOUT 压缩.减小图片大小,就可以减少用户下载的文件大小,加快页面访问速度. 不过上面提到的几个工具

使用grunt来无损压缩图片

作为一个前端工程师,或者web开发工程师,图片是你无法忽视的一个东西,没有一本优化方面的书不会提及图片的优化. pagespeed里面,首当其冲的也是提示你的图片需要优化. 之前有做过很多尝试,处理png图片等,可以查看以前的博客:优化png图片的历程 但是之前的方法有两个问题: 1.主要是优化PNG图片 2.效率低下,不适合批量操作 为了解决上诉问题,现在使用一个新的方法去批量压缩图片. 这个方法就是,噔噔噔噔,Grunt-contrib-imagemin 操作步骤如下: 1.首先你得有nod

【转】Gulp入门基础教程

Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端 代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多 强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们 可以做一个对比: Grunt: sass: { dist

图片压缩工具之grunt-contrib-imagemin

对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小,加快页面访问速度.Google Pagespeed最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩,如果是 PNG 格式,则使用 OptiPNG 或 PNGOUT 压缩. 但是对于不同格式的图片,我们需要用pegtran/jpegoptim/OptiPNG/PNGOUT 等多种工具来分别压缩,这样对于前端开发

转:Gulp使用指南

原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更好阅读及维护. Glup使用node.js串流(streams)让建构更快速,不须写出资料到硬盘的暂存档案/目录.如果你想了解更多有关串流–虽然不是必须的–你可以阅读这篇文章.Gulp利用来源档案当作输入,串流到一群外挂(plugins),最后取得输出的结果,并非配置每一个外挂的输入与输出–就像Gr