评论：使用 gulp 压缩图片

[nimoc]

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

[zhengdai]

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

[nimoc]

@zhengdai
感谢指正，已修复。

[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