gulp压缩图片添加版本号的问题？

Question

今天使用gulp压缩图片，并且给图片添加版本号，但是压缩出来的图片是坏的，打不开，版本号添加上去了，死活不知道啥问题，求大神解答啊！

运行gulp rimg; 压缩出来的图片是坏的，
急啊

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    compass = require('gulp-compass'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    clean = require('gulp-clean'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    requirejsOptimize = require('gulp-requirejs-optimize'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

/**
* 配置选项
*/
var config = {
  cssUrl : 'sources/sass/*.scss',
  jsUrl : 'sources/javascripts/only/*.js',
  htmlUrl : ['sources/**/*.html','sources/index.html'],
  imageUrl : 'sources/images/**/*',
}

/**
* css文件处理
*/
gulp.task('buildCss',function(){
  return gulp.src( config.cssUrl )
      .pipe(compass({
      config_file: 'config.rb',
      css: 'sources/sass',
      sass: 'sources/sass'
    }))
    .pipe(concat('main.css'))
    .pipe(minifyCss())
    .pipe(rename({basename: 'main', suffix: '.min'}))
    .pipe(rev())
    .pipe(gulp.dest('src/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('sources/rev/css'));
});

/**
* js文件处理
*/
gulp.task('buildJs',['move'],function(){
  return gulp.src( config.jsUrl )
    //合并require模块js
    .pipe(requirejsOptimize())
    //压缩js
    .pipe(uglify())
    .pipe(rev())
    //输出文件
    .pipe(gulp.dest('src/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('sources/rev/js'));
});

/**
 * image压缩
 */
gulp.task('buildImg', function() {  
  return gulp.src( config.imageUrl )
    .pipe(imagemin({ 
        distgressive: true,
        progressive: true,
        interlaced: true,
        svgoPlugins: [{removeViewBox: false}]
    }))
    .pipe(rev())
    .pipe(gulp.dest('src/images'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('sources/rev/img'));
});

/**
 * html
 */
gulp.task('buildHtml', function() {  
  return gulp.src( config.htmlUrl )
    .pipe(gulp.dest('src'));
});

gulp.task('rimg', ['buildImg'], function(){
  return gulp.src(['sources/rev/img/*.json', 'src/**/*'])
    .pipe(revCollector())
    .pipe(gulp.dest('src'))
    .pipe(reload({ stream:true }));  
});

gulp.task('rcss', ['buildCss'], function(){
  return gulp.src(['sources/rev/css/*.json', 'src/**/*'])
    .pipe(revCollector())
    .pipe(gulp.dest('src'))
    .pipe(reload({ stream:true }));  
});

gulp.task('rjs', ['buildJs'], function(){
  return gulp.src(['sources/rev/js/*.json', 'src/**/*'])
    .pipe(revCollector())
    .pipe(gulp.dest('src'))
    .pipe(reload({ stream:true }));  
});

/**
 * browserSync服务监听
 * 
 */
gulp.task('serve',['rimg', 'rjs', 'rcss', 'buildHtml'], function() {
  browserSync({
    server: {
      baseDir: './src/'
    }
  });

  //监听image文件
  gulp.watch( config.imageUrl, ['rimg']);
  //监听scss文件
  gulp.watch( config.cssUrl, ['rcss']);
  //监听js文件
  gulp.watch( config.jsUrl, ['rjs']);
  //监听html文件
  gulp.watch( config.htmlUrl, ['buildHtml']);
});

/**
 * 移动requirejs主文件
 */
gulp.task('move', function() {
  return gulp.src(['sources/javascripts/require.js'])
    .pipe(gulp.dest('src/js'));
});

/**
 * 版本号文件替换
 */
gulp.task('rev',['buildImg', 'buildJs', 'buildCss', 'buildHtml'], function() {
  return gulp.src(['sources/rev/**/*.json', 'src/**/*'])  //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
      .pipe(revCollector())  //- 执行文件内css名的替换
      .pipe(gulp.dest('src'))
      .pipe(reload({ stream:true }));  //- 替换后的文件输出的目录
});

/**
 * 清理文件
 */
gulp.task('clean', function () {
  return gulp.src(['src/*','sources/rev/*'], {read: false})
    .pipe(clean());
});

/**
 * default
 */
gulp.task('default',['clean'], function() {
  gulp.run('serve');
});

{
  "name": "gsr",
  "version": "1.0.0",
  "description": "www.willyusir@gmail.com",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.9.1",
    "gulp": "^3.9.0",
    "gulp-cache": "^0.3.0",
    "gulp-clean": "^0.3.1",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.0.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-rename": "^1.2.2",
    "gulp-requirejs-optimize": "^0.3.0",
    "gulp-rev": "^6.0.1",
    "gulp-rev-collector": "^1.0.2",
    "gulp-simple-compass": "^0.1.1",
    "gulp-uglify": "^1.4.0",
    "merge-stream": "^1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "will",
  "license": "MIT"
}

Answer 1

这个问题是由于gulp的执行顺序的问题和图片重复压缩的问题，使用run-sequence，并且修改

gulp.task('rimg', ['buildImg'], function(){
  return gulp.src(['sources/rev/img/*.json', 'src/**/*.+(jsp|html)'])
    .pipe(revCollector())
    .pipe(gulp.dest('src'))
    .pipe(reload({ stream:true }));  
});

避免给打过版本号的图片，再次替换版本号导致图片损坏。

Answer 2

有可能是imagemin插件里面的配置有误，试试
{

  distgressive: true,
  progressive: true,
  interlaced: true,
  svgoPlugins: [{removeViewBox: false}]

}

"gulp-imagemin": "^2.0.0",

我才发布的一篇文章，可以实现图片压缩加上版本 http://segmentfault.com/a/1190000003730672

Answer 3

图片还没试过用gulp压缩，获取试试 和楼主交流啊

Answer 4

用 coolie 吧。

coolie 官方指南

• JS 文件的分析、合并、压缩、版本管理

• CSS 文件的分析、合并、压缩、版本管理

• HTML 文件分析、压缩、版本管理

• 入口模块的分析、分块、合并、压缩、版本管理

• 静态资源的分析、压缩、版本管理

其中静态资源的版本管理就包含了图片的版本管理。

谢谢。