Gulp: 如何让gulp在源文件被删除的情况下自动删除一个输出文件？

Question

我正在使用 gulp 和 gulp-imagemin 进行一些图像优化工作。我设置 gulp watch 来观察变化，一旦我：

将新图片添加到图片源文件夹
删除图像源文件夹中的图像

到目前为止，第一个效果很好，当添加新图像时，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，并且每次发生变化时都会处理您的所有图像。

Gulp: 如何让gulp在源文件被删除的情况下自动删除一个输出文件？

Gulp: How to make gulp automatically delete an output file if the source has been deleted?

gulp

gulp-imagemin

gulp-watch