gulp - 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每次更改时都会处理您的所有图像。