GulpJS:如何修改图像然后在css文件中更新它们的引用？

Question

gulp.task('usemin', function () {

  return gulp.src(path.src + '*.html')
    .pipe(usemin({
      assetsDir: 'src',
      css: [ minifyCss(), 'concat', rev()],
      js: [uglify(), rev()],
      images: [rev()]
    }))
    .pipe(gulp.dest(path.dist));
});

它不适用于图像.

Answer 1

对我来说，gulp-rev-all的哲学是看待资产修正的好方法。他们的自述文件中很好地解释了哈希值还应该考虑修订文件之间的引用。

我模拟了一个小例子，它缩小了图像和 css 文件，它使用属性background url来查看新图像路径的修订。

gulp.task('image', function () {
  return gulp.src('image.jpeg')
    .pipe(img({ progressive: false }))
    .pipe(gulp.dest('tmp'));
});

gulp.task('css', function () {
  return gulp.src('test.css')
    .pipe(css())
    .pipe(gulp.dest('tmp'));
});

gulp.task('rev', ['image', 'css'], function () {
  return gulp.src('tmp/**')
    .pipe(rev())
    .pipe(gulp.dest('dist'));
});

为了更加清晰，我删除了所有花哨的内容，但您可以在此处查看整个示例。