为什么 gulp-watch 不删除文件

Question

我试图让我的 gulp-watch 任务在我从 /src 目录中删除文件时从 /dest 目录中删除文件，但它不起作用。哪里错了？

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

var imgSrc = 'src/img/**';
var imgDst = 'build/img';

gulp.task('del', function() {
  return del('build');

});

gulp.task('img', function() {
  return gulp.src(imgSrc)
    .pipe(debug({title: 'src'}))
    //.pipe(newer(imgDst))
    .pipe(imagemin())
    .pipe(debug({title: 'imagemin'}))
    .pipe(gulp.dest(imgDst))
    .pipe(debug({title: 'dest'}));
});

gulp.task('watch', function () {
    var watcher = gulp.watch(imgSrc, ['img']);

    watcher.on('change', function (event) {
        if (event.type === 'deleted') {
            var filePathFromSrc = path.relative(path.resolve(imgSrc), event.path);
            var destFilePath = path.resolve(imgDst, filePathFromSrc);
            del.sync(destFilePath);
        }
    });
});

Answer 1

您的 destFilePath 指向一个不存在的文件。如果你删除一个文件 src/img/foo.png 你的 destFilePath 变量最终指向 build/foo.png 而不是 build/img/foo.png （这是你的 img 任务放置它的地方）。

原因是您将 path.relative() 应用到包含 ** 的 imgSrc。但是 path.relative() 并不能解释 glob。它只是将 ** 解释为常规目录名称。所以你最终离开了一个目录。

使用path.relative()时需要省略**:

if (event.type === 'deleted') {
    var filePathFromSrc = path.relative(path.resolve('src/img'), event.path);
    var destFilePath = path.resolve(imgDst, filePathFromSrc);
    del.sync(destFilePath);
}

为什么 gulp-watch 不删除文件

Why gulp-watch doesn't delete files

javascript

node.js

gulp

gulp-watch