Gulp 监视删除文件

Question

我是 Gulp 的新手，我做了一些研究但没有找到解决方案.. 这是我的 Gulpfile。

var gulp = require('gulp');
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync').create();


var paths = {
    src: 'src/',
    dist: 'dist/',
    html: '**/*.html',
    php: '**/*.php',
    images: {
        src: 'assets/img/**/*.{png,jpg,jpeg,svg,gif}',
        dist: 'assets/img'
    },
    misc: '**/*.{ico,htaccess,txt}'
}


/**
 * Files
 */
gulp.task('files', function(){

    return gulp.src([
        paths.src + paths.php,
        paths.src + paths.html,
        paths.src + paths.misc
    ])
    .pipe(gulp.dest(paths.dist))
    .pipe(browserSync.stream());

});

/**
 * Images
 */
gulp.task('images', function(){

    return gulp.src(
        paths.src + paths.images.src
    )
    .pipe(imagemin({
        progressive: true
    }))
    .pipe(gulp.dest(paths.dist + paths.images.dist))
    .pipe(browserSync.stream());

});

/**
 * Serve
 */
gulp.task('serve', ['files', 'images'], function(){

    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });

    watch([
        paths.src + paths.php,
        paths.src + paths.html,
        paths.src + paths.misc
    ], function(){ gulp.start('files') }); 


    watch(
        paths.src + paths.images.src
    , function(){ gulp.start('images') }); 

});

一切正常，但在观看我的“src”文件夹（服务任务）中的文件时，当我删除“src”中的文件（图像或 html、php 等）时，该文件不会在“ dist”文件夹。

当文件更改或添加时，没问题..我找到了一些类似的主题但没有解决方案..

谢谢。

Answer 1

dist 文件夹中的文件没有被删除的原因是，gulp.watch() 只是在监视的文件发生更改时重新运行任务。该任务不知道它运行的原因是因为文件被删除了。它只是在其gulp.src() 语句中处理与 glob 匹配的所有文件。

由于已删除的文件不再存在，它不会被gulp.src() 拾取，您的任务也不会处理它。它只是在您的dist 文件夹中保持原样，而那里的其他文件被覆盖。

解决此问题的一种方法是遵循Handling the Delete Event on Watch 配方：

var fileWatcher = watch([
    paths.src + paths.php,
    paths.src + paths.html,
    paths.src + paths.misc
], function(){ gulp.start('files') }); 

fileWatcher.on('change', function (event) {
    if (event.type === 'deleted') {
        var filePathFromSrc = path.relative(path.resolve(paths.src), event.path);
        var destFilePath = path.resolve(paths.dist, filePathFromSrc);
        del.sync(destFilePath);
    }
});

对图像的处理将是类似的。