评论：使用 gulp 压缩图片

[nimoc]

请在此处留下你对 使用 gulp 压缩图片 的评论

[zhengdai]

gulp-imagemin的地址错了啊，是这个https://github.com/sindresorhus/gulp-imagemin

[nimoc]

@zhengdai 感谢指正，已修复。

[mzpuu]

嗨，我想请教一下

[16:29:50] Using gulpfile ~/workspace/testgulp/gulpfile.js [16:29:50] Starting 'default'... [16:29:50] Finished 'default' after 22 ms [16:29:50] gulp-imagemin: Minified 2 images (saved 0 B - 0%)

gulpfile.js中图片压缩为

gulp.src(paths.images) .pipe(imagemin({ optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化

    }))
    .pipe(gulp.dest('./theme/images/'));

为什么图片没有压缩呢？ 大神，请指点一二

刚刚看了下gulp-imagemin安装好像出问题了 Error: Cannot find module 'xtend'

额，刚刚又安装了imagemin-jpegtran 和 imagemin-pngquant 之后发现可以运行了，结果如下

[17:13:52] Using gulpfile ~/workspace/testgulp/gulpfile.js [17:13:52] Starting 'default'... [17:13:52] Finished 'default' after 20 ms [17:13:52] gulp-imagemin: Minified 2 images (saved 115.42 kB - 7.4%)

两张图片压缩了7.4%， optimizationLevel可以设置优化等级，我在去试试。

谢谢楼主前面的教程，我从中也学到了不少，另外占楼了 ：）

[Measy]

http://segmentfault.com/q/1010000003881805 碰到如该题主同样的问题,不知道什么原因

[chongyuan]

请问“压缩图片的 gulp-imagemin ”和“css雪碧sprite的 css-sprite ”能否结合使用呢？是先压缩图片任何做雪碧图，还是先做雪碧图再压缩呢？

[nfer]

gulp.watch('images/*.*)', ['images'])这一行，多了一个)

[nfer]

我还遇到另外一个问题：

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: spawn /home/nfer/git/gulp/lean_20160406/node_modules/gifsicle/vendor/gifsicle ENOENT
    at exports._errnoException (util.js:870:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at nextTickCallbackWith2Args (node.js:441:9)
    at process._tickCallback (node.js:355:17)

问题应该是gifsicle版本太老的问题，我单独安装了一下gifsicle就OK了。 npm install gifsicle

[yyidota]

• 一直报错，windows10系统 events.js:154 throw er; // Unhandled 'error' event ^ Error: spawn G:\code\card\card_manager\f2e\node_modules\optipng-bin\vendor\optipng.exe ENOENT at exports._errnoException (util.js:893:11) at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32) at onErrorNT (internal/child_process.js:348:16) at _combinedTickCallback (internal/process/next_tick.js:74:11) at process._tickCallback (internal/process/next_tick.js:98:9)
• 任务配置

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

// imagemin
gulp.task('imageMin', function(cb) {
  gutil.beep();
  return gulp.src('dist/img/**/*')
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{
        removeViewBox: false
      }],
      use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/img'));
});

有无解决方案？

[wy-ang]

@yyidota 你引gulp了么？ 比如：var gulp = require('gulp')

[yyidota]

@wy-ang 引用了，上面只是配置的其中一段，我重装了很多次imagemin 和 pngquant插件，依然报上面的错误。

• 完整代码

var gulp = require('gulp');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

// imagemin
gulp.task('imageMin', function(cb) {
  gutil.beep();
  return gulp.src('dist/img/**/*')
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{
        removeViewBox: false
      }],
      use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/img'));
});

[wy-ang]

@yyidota 你先这样试下

gulp.task('imagemin', function () { gulp.src('./test/img/*.*') .pipe(imagemin({ optimizationLevel:7 })) .pipe(gulp.dest('./test/dist')); });

[yyidota]

@wy-ang 依旧报

events.js:154
      throw er; // Unhandled 'error' event
      ^
Error: spawn G:\code\card\card_manager\f2e\node_modules\optipng-bin\vendor\optipng.exe ENOENT
    at exports._errnoException (util.js:893:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32)
    at onErrorNT (internal/child_process.js:348:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

[wy-ang]

@yyidota 试下这个 这个要是还报错的话 重装gulp吧。

var gulp = require('gulp'),
    fs = require('fs'),
    spritesmith = require('gulp.spritesmith'),//css雪碧图
    imagemin = require('gulp-imagemin');//图片压缩

var sourcePath = './test/*.*',
    targetPath = './test/';

gulp.task('spritImg',function(){
    gulp.src(sourcePath)
    .pipe(spritesmith({
        imgName:'icon_index.png',
        cssName: 'icon.css',
        algorithm:'binary-tree',
        padding:5
    }))
    .pipe(gulp.dest(targetPath));
});
gulp.task('imgMin', function () {
    gulp.src(sourcePath)
        .pipe(imagemin({
            optimizationLevel:7
        }))
        .pipe(gulp.dest(targetPath));
});
var taskList = ['spritImg','imgMin'];
gulp.task('default',taskList);

[wy-ang]

@yyidota 刚才百度了下 据说是windows下npm执行名不同 可能和gulp没关。我猜和你系统有关

[wy-ang]

@yyidota 参考下这个http://stackoverflow.com/questions/17516772/using-nodejss-spawn-causes-unknown-option-and-error-spawn-enoent-err

[yyidota]

@wy-ang 我也开始觉得是系统问题 这个地址404

[wy-ang]

@yyidota 刷新issues这个页面再点一次

[yyidota]

@wy-ang 如果是npm的问题，其他的任务却可以执行，应该不是npm问题，就执行压缩图片任务时报错，不知道是不是版本的问题。

[yyidota]

@wy-ang 已修复 先把插件升级到最新版，执行任务不再报错，但没有压缩图片。又卸载重装就ok了。 莫非先升级最新版，再卸载重装！

[Princeraul]

使用了imagemin-pngquant，为什么压缩比例还是只有1%-6%，没有tinypng压缩60%-80%好呢！ 代码是： 'use strict';

import gulp from 'gulp'; import pngquant from 'imagemin-pngquant'; import gulpLoadPlugins from 'gulp-load-plugins'; import config from '../../config';

const $ = gulpLoadPlugins();

gulp.task('imagemin:watch', () => { gulp.src(config.assets.images.src) .pipe($.cache($.imagemin({ //无损压缩jpg图片 progressive: true, //不要移除svg的viewbox属性 svgoPlugins: [{removeViewBox: false}], //使用pngquant深度压缩png图片的imagemin插件 use: [pngquant()] }))) .on('error', console.error.bind(console)) .pipe(gulp.dest(config.assets.images.dest)); });

[Princeraul]

@wy-ang