Gulp:如果源已被删除，如何使gulp自动删除输出文件？

Question

我将gulp和gulp-imagemin一起用于一些图像优化工作。我设置了gulp watch来监视更改，一旦我：

1. 将新图像添加到图像源文件夹
2. 删除图像源文件夹中的图像

到目前为止，第一个很好的工作，当一个新的图像被添加时，gulp运行任务并压缩新的图像；然而，当我删除一个图像时，gulp似乎什么也不做。我是不是漏掉了一个插件或一些设置？

请参阅下面的gulpfile：

// gulpfile.js
var gulp = require('gulp');
var newer = require('gulp-newer');
var imagemin = require('gulp-imagemin');


var imgSrc = 'src/images/**';
var imgDest = 'images';

gulp.task('images', function() {
  return gulp.src(imgSrc)
  .pipe(newer(imgDest))
  .pipe(imagemin({
      optimizationLevel: 5,
      progressive: true,
      interlaced: true
    }))
  .pipe(gulp.dest(imgDest));
});

gulp.task('watch', function() {
  gulp.watch(imgSrc, ['images']);
});

gulp.task('default', ['images', 'watch']);

Answer 1

试试这个：

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

var imgSrc = 'src/images/**';
var imgDest = 'dist/images';

gulp.task('images', function() {
  return gulp.src(imgSrc)
  .pipe(imagemin({
      optimizationLevel: 5,
      progressive: true,
      interlaced: true
    }))
  .pipe(gulp.dest(imgDest));
});

gulp.task('clean-img', function (cb) {
 return del(imgDest,cb);
 });
gulp.task('watch', function() {
  gulp.watch(imgSrc, ['clean-img','images']);
});

gulp.task('default', ['clean-img','images', 'watch']);  

这将清除dist文件夹，并从src文件夹中添加图像。不幸的是，这种方法不适用于gulp-newer，每次发生更改时都会处理所有的图像。