gulp教程之gulp-imagemin

Ooo_My_God发表于 分类:构建工具 阅读(13744) 评论(42)

简介:

使用gulp-imagemin压缩图片文件(包括PNG、JPEG、GIF和SVG图片),很多人安装gulp-imagemin都会出现错误,我也查了很多资料,也不知道所以然,我的做法是出错再重新安装,如果你知道问题所在,请一定告诉我!

1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

2、本地安装gulp-imagemin

2.1、github:https://github.com/sindresorhus/gulp-imagemin

2.2、安装:命令提示符执行 cnpm install gulp-imagemin --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-imagemin --save-dev什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

3、配置gulpfile.js

3.1、基本使用

3.2、gulp-imagemin其他参数 具体参看

3.3、深度压缩图片

3.3、只压缩修改的图片。压缩图片时比较耗时,在很多情况下我们只修改了某些图片,没有必要压缩所有图片,使用”gulp-cache”只压缩修改的图片,没有修改的图片直接从缓存文件读取(C:\Users\Administrator\AppData\Local\Temp\gulp-cache)。

4、执行任务

4.1、命令提示符执行:gulp testImagemin

5、结束语

5.1、本文有任何错误,或有任何疑问,欢迎留言说明。

下载附件

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/26

相关推荐

评论

网友最新评论 (42)

  1. 修改的图片是指文件的MD5签名发生改变,不是指时间。每个文件都有唯一的MD5签名,图片修改过,MD5就会变。

    Ooo_My_God 09-26 17:27 回复
  2. 请问遇到什么问题了?D:nginx-1.10.1htmlgitsea-test>gulp images-min[14:02:41] Using gulpfile D:nginx-1.10.1htmlgitsea-testgulpfile.js[14:02:41] Starting ‘images-min’…(node) warning: possible EventEmitter memory leak detected. 11 exit listeners added. Use emitter.setMaxListeners() to increase limit.Traceat EventEmitter.addListener (events.js:252:17)at module.exports (D:nginx-1.10.1htmlgitsea-testnode_modules.3.0.1@signal-exitindex.js:41:11)at module.exports.promise (D:nginx-1.10.1htmlgitsea-testnode_modules.0.5.0@execaindex.js:146:23)at D:nginx-1.10.1htmlgitsea-testnode_modules.3.1.0@exec-bufferindex.js:35:15

    Wanan 10-25 14:04 回复
    • 你好,你的gulpfile.js配置是什么样子的?

      YDCSS 10-26 08:51
    • var gulp = require(‘gulp’), cache = require(‘gulp-cache’), //缓存 rev = require(‘gulp-rev-append’), //添加版本号 yargs = require(‘yargs’).argv, //获取运行gulp命令时附加的命令行参数 clean = require(‘gulp-clean’), //清理文件或文件夹 replace = require(‘gulp-replace-task’), //对文件中的字符串进行替换 browserSync = require(‘browser-sync’), //启动静态服务器 transport = require(“gulp-seajs-transport”), //对seajs的模块进行预处理:添加模块标识 concat = require(“gulp-seajs-concat”), //seajs模块合并 uglify = require(‘gulp-uglify’), //js压缩混淆 merge = require(‘merge-stream’), //合并多个流 imagemin = require(‘gulp-imagemin’), //压缩图片 pngquant = require(‘imagemin-pngquant’), //深度压缩png图片 htmlmin = require(‘gulp-htmlmin’), //压缩html cssmin = require(‘gulp-minify-css’), //压缩css cssver = require(‘gulp-make-css-url-version’), //css文件添加版本 src = ‘src’, dist = ‘dist’, CONTEXT_PATH = ‘blog/seajs/’, replace_patterns = [ { match: ‘CONTEXT_PATH’, replacement: yargs.r ? CONTEXT_PATH : ” } ];gulp.task(‘images-min’, function () { return gulp.src(src + ‘/images/*.{png,jpg,gif,ico}’) .pipe(imagemin({ })) .pipe(gulp.dest(dist + ‘/images/’));});

      Wanan 10-26 11:45
    • 你安装gulp-imagemin时有出现错误么?如果配置没错,绝大多数是插件的问题(我和我同事多次实践经历),请尝试重新安装gulp-imagemin试试水。

      YDCSS 10-26 08:55
    • 重新安装需要把目录【node_modules/.3.0.3@gulp-imagemin】 删除吗?

      Wanan 10-26 11:26
  3. 大神解决了问题么?

    无泪 10-28 17:18 回复
  4. 您好,我安装gulp-imagemin时没有出错,但是我这生成的node_modules文件夹跟你上面的不一样,我看的node_modules文件下只有5个文件,而我的有319个文件,请问这是怎么回事呢?是哪里出错了吗?我用gulp-less时也是这样

    马莹莹 11-13 20:45 回复
    • 哎呀 好像不能上传截图

      马莹莹 11-13 20:48
    • 你好,其实是一样的,原来每个包所依赖的包在其文件夹内,新版的npm换了一种方式,统一放一级目录啦。

      Ooo_My_God 11-17 15:45
    • 你好,其实是一样的,原来每个包所依赖的包在其文件夹内,新版的npm换了一种方式,统一放一级目录啦。

      YDCSS 11-17 15:52
    • 原来是这样呀,谢谢您

      马莹莹 11-19 16:31
    • 你好,其实是一样的,原来每个包所依赖的包在其文件夹内,新版的npm换了一种方式,统一放一级目录啦。

      YDCSS 11-17 15:52
    • 你好,其实是一样的,原来每个包所依赖的包在其文件夹内,新版的npm换了一种方式,统一放一级目录啦。

      YDCSS 11-17 15:52
    • 你好,其实是一样的,原来每个包所依赖的包在其文件夹内,新版的npm换了一种方式,统一放一级目录啦。

      YDCSS 11-17 15:52
  5. 通过maven构建的时候有时候在下载压缩工具的时候会出现下载失败的问题。在执行jpegtran-bin,optipng-bin,gifsicle这几个文件的时,都会下载各自的压缩工具,url是在脚本里面写死的。当访问国外网站较慢时,有可能下载失败,脚本里面也没有重连机制。这个时候就会安装失败了,只能删除重连。使用cnpm可能快一些。

    宋彬 11-23 01:17 回复
    • 感谢!

      YDCSS 11-23 09:15
  6. 这个图片压缩插件是不是跟PS里保存成web格式是一样的作用?

    5度仰角 12-22 15:22 回复
    • 建议您试一下。

      YDCSS 12-22 20:28
    • 建议您试一下。

      YDCSS 12-22 20:28
  7. 大神,请教一下,我按你写的来,在C:UsersAdministratorAppDataLocalTempgulp-cache里也找到了对应的缓存文件,但是我发现,每次我修改一个图片,所有的图片都被压缩了,“只压缩修改”这个目的根本没有达到

    呼啦啦 02-16 12:04 回复
  8. 我有个疑问,压缩后的图片在用户端解压后图片不会失真等问题吧??

    (≧▽≦) 02-23 17:29 回复
  9. 一直提示这个是什么问题 gulp-imagemin: Couldn’t load default plugin “gifsicle”

    尐湶細蓅 03-25 18:25 回复
  10. gulp-imagemin: Couldn’t load default plugin “gifsicle” 刚这个回复看不到。。不知道是什么原因

    尐湶細蓅 03-25 18:35 回复
输入关键字