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()不會將其gulp.src()並且您的任務不會處理它。 它只是保持在你的dist文件夾中，而其他文件被覆蓋。

解決此問題的一種方法是遵循處理Watch 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);
    }
});

處理您的圖像將是類似的。