为什么Gulp-Watch不会删除文件

Question

I'm trying to make my gulp-watch task to delete files from /dest directory when I delete them from /src , but it doesn't work. Where is the mistake?

 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

Your destFilePath points to a file that doesn't exist. If you delete a file src/img/foo.png your destFilePath variable ends up pointing to build/foo.png instead of build/img/foo.png (which is where your img task has put it).

The reason is that you're applying path.relative() to imgSrc which contains ** . However path.relative() doesn't unterstands globs. It just interprets ** as a regular directory name. So you end up being one directory off.

You need to leave out the ** when you use 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);
}