Gulp watch 删除文件

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);
    }
});

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