使用gulp-watch插件的Gulp不在觀察文件

Question

我想通過gulp-watch插件使用這個recipe來重建僅在我的gulpfile.js中改變的文件。問題是當我運行我的默認任務gulp時，在保存任何我希望它觀看的文件後，它根本不會觀看這些文件。我在做什麼錯在我的gulpfile.js？提前致謝。

/* ----------------------------------------------------- */ 
/* Gulpfile.js 
/* ----------------------------------------------------- */ 
'use strict'; 

// Setup modules/Gulp plugins 
var gulp   = require('gulp'), 
    del    = require('del'), 
    runSequence  = require('run-sequence'), 
    less   = require('gulp-less'), 
    // minifyCSS  = require('gulp-minify-css'), 
    fileinclude  = require('gulp-file-include'), 
    order   = require('gulp-order'), 
    concat   = require('gulp-concat'), 
    uglify   = require('gulp-uglify'), 
    sourcemaps  = require('gulp-sourcemaps'), 
    imagemin  = require('gulp-imagemin'), 
    pngquant  = require('imagemin-pngquant'), 
    plumber   = require('gulp-plumber'), 
    watch   = require('gulp-watch'), 
    // browserify = require('browserify'), 
    // sourceStream = require('vinyl-source-stream'), 
    connect   = require('gulp-connect'); 

// Configure file paths 
var path = { 
    DEST: 'dist/', 
    SRC: 'src/', 
    INCLUDES: 'include/', 
    LESS_SRC: 'src/frontend/less/', 
    LESS_MANIFEST: 'src/frontend/less/all.less', 
    CSS_DEST: 'dist/frontend/css/', 
    JS_SRC: 'src/frontend/js/', 
    JS_MINIFIED_OUT: 'all.js', 
    JS_DEST: 'dist/frontend/js', 
    IMG_SRC: 'src/frontend/img/', 
    IMG_DEST: 'dist/frontend/img/', 
}; 

// Clean out build folder each time Gulp runs 
gulp.task('clean', function (cb) { 
    del([ 
     path.DEST 
    ], cb); 
}); 

// Compile LESS 
gulp.task('less', function(){ 
    return gulp.src(path.LESS_MANIFEST) 
     .pipe(watch(path.LESS_MANIFEST)) 
     .pipe(plumber({ 
      handleError: function (err) { 
       console.log(err); 
       this.emit('end'); 
      } 
     })) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(path.CSS_DEST)) 
     .pipe(connect.reload()); 
}); 

// Allow HTML files to be included 
gulp.task('html', function() { 
    return gulp.src([path.SRC + '*.html']) 
     .pipe(watch(path.SRC + '*.html')) 
     .pipe(plumber({ 
      handleError: function (err) { 
       console.log(err); 
       this.emit('end'); 
      } 
     })) 
     .pipe(fileinclude({ 
      prefix: '@@', 
      basepath: path.INCLUDES 
     })) 
     .pipe(gulp.dest(path.DEST)) 
     .pipe(connect.reload()); 
}); 

// Concatenate and minify JavaScript 
gulp.task('js', function() { 
    return gulp.src(path.JS_SRC + '**/*.js') 
     .pipe(watch(path.JS_SRC + '**/*.js')) 
     .pipe(order([ 
      path.JS_SRC + 'framework/*.js', 
      path.JS_SRC + 'vendor/*.js', 
      path.JS_SRC + 'client/*.js' 
     ], {base: '.'})) 
     .pipe(concat(path.JS_MINIFIED_OUT)) 
     .pipe(uglify()) 
     .pipe(gulp.dest(path.JS_DEST)) 
     .pipe(connect.reload()); 
}); 

// Minify images 
gulp.task('imagemin', function() { 
    return gulp.src(path.IMG_SRC + '**/*') 
     .pipe(imagemin({ 
      progressive: true, 
      use: [pngquant()] 
     })) 
     .pipe(gulp.dest(path.IMG_DEST)); 
}); 

// Copy folders 
gulp.task('copy', function() { 
    gulp.src(path.SRC + 'extjs/**/*') 
     .pipe(gulp.dest(path.DEST + 'extjs/')); 
    // Copy all Bower components to build folder 
    gulp.src('bower_components/**/*') 
     .pipe(gulp.dest('dist/bower_components/')); 
}); 

// Connect to a server and livereload pages 
gulp.task('connect', function() { 
    connect.server({ 
     root: path.DEST, 
     livereload: true 
    }); 
}); 

// Organize build tasks into one task 
gulp.task('build', ['less', 'html', 'js', 'imagemin', 'copy']); 
// Organize server tasks into one task 
gulp.task('server', ['connect']); 

// Default task 
gulp.task('default', function(cb) { 
    // Clean out dist/ folder before everything else 
    runSequence('clean', ['build', 'server'], 
     cb); 
}); 

Answer 1

嘗試從構建任務中移除手錶，並分別處理觀看任務。例如：

gulp.task("watch-less", function() { 
    watch(path.LESS_MANIFEST, function() { 
     gulp.start("less"); 
    )); 
}); 

這樣，它只會在文件更改時觸發任務。觀看的任務能夠與你的構建分開運行（如果你使用某種形式的構建自動化，這也會讓你的生活更輕鬆）。

此外，您還可以指定多個表的任務，像這樣：

gulp.task("watch", function() { 
    watch(paths.FOO, function() { 
     gulp.start("foo"); 
    }); 

    watch(paths.BAR, function() { 
     gulp.start("bar"); 
    }); 
});