Gulp 不使用 gulp-watch 插件观看文件

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