gulp教程之gulp-imagemin

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

简介:

使用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

相关推荐

评论

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

  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

    • 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/’));});

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

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

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

输入关键字