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等...）时，文件不会在“src”中删除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);
    }
});

对图像的处理方式类似。

Gulp观看删除文件

1 个答案: