Gulp-watch 任务导致无限循环答案

【问题标题】：Gulp-watch task resulting in endless loopGulp-watch 任务导致无限循环
【发布时间】：2016-04-14 14:29:24
【问题描述】：

我正在使用 'gulp-watch' 来监控文件夹 images/ 下的文件更改，并使用 'gulp-imagemin' 和 'gulp-cache' 来压缩和覆盖更改图像文件。

watch 任务运行正常，当我添加新图像文件时，img-minify 任务卡在无限循环中。

我已尝试消除“gulp-cache”的使用，但img-minify 任务仍然导致无限循环。

谢谢。

var gulp = require('gulp'),
    watch = require('gulp-watch'),        
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    cache = require('gulp-cache');

gulp.task('clear', function() {
    return cache.clearAll();
});

gulp.task('img-minify', function() {
    var paths = {
        src: 'images/**/*',
        dest: 'images/'
    };
    return gulp.src(paths.src)
    .pipe(cache(imagemin({
        progressive: true,
        use: [pngquant()]
    })))
    .pipe(gulp.dest(paths.dest));
});

var paths = { 'img': ['images/**/*.png', 'images/**/*.jpg'] };
gulp.task('watch', function() {
    watch(paths.img, function() {
        gulp.start('img-minify');
    });
});

gulp.task('default', ['watch']);

【问题讨论】：

尝试为您的图片使用不同的 dest 目录。
@Barryman9000 谢谢。这可能会解决问题，但我只想覆盖 src 图像。也许gulp-cache 包可以通过gulp-watch 打破无限循环，但我没有找到实现这一点的方法。

标签： gulp gulp-watch gulp-imagemin

【解决方案1】：

我猜你正在查看一个文件夹并触发一个将修改同一个文件夹的任务。通过这样做，观察者将始终捕获文件更改并一次又一次地触发任务。

我猜你有两个选择。

为source 和distribution 保留不同的文件夹；观看source 并在distribution 上运行任务。
向路径添加过滤器，这样您就不会看到您将要修改的文件。

【讨论】：