gulp-watch - 终止 gulp-watch 任务

Question

我希望我的 gulp watch 任务只运行一次，然后停止观看。现在，如果我从命令行运行“gulp”，监视任务会保持 gulp 任务运行。我必须按 Ctrl-C 才能停止它。

Answer 1

当您运行 gulp watch 时，它会一直监视文件更改，直到您使用 CTRL-C 取消它。如果你不想要这个，那么你可以做一个单独的 gulp 任务来完成你的构建。

那么你将有 2 个任务：gulp watch 和 gulp build。由于构建不会运行监视任务，它会在完成后停止。

请看一下我的一个 GitHub 项目，我在其中做这样的事情：GitHub 上的 skeletonSPA。如果您看一下gulpfile.js，您会看到该default任务将执行该build任务。构建任务将依次执行info, clean, styles, scripts, images, copy, todo; 为您提供完整的构建和工作前端。

运行这些任务后，它将停止并让您专注于命令行。

Answer 2

这是一个非常基本的示例GulpFile.js：

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    runSequence = require('gulp-sequence'),
    webpack = require('webpack-stream');

gulp.task('webpack', function() {
    return gulp.src('client/index.js')
        .pipe(webpack({
            output: {
                filename: 'dist/bundle.js'
            },
            devtool: 'source-map'
        }))
        .pipe(gulp.dest('.'));
});

// other tasks

gulp.task('build', ['webpack', 'other tasks... ']);

gulp.task('watch', function(callback) {
    gulp.watch('./client/**/*.js', {}, ['webpack']);
    // more watches if required
});

gulp.task('default', function(callback) {
    runSequence('build', 'watch', callback);
});

$ gulp build> 将只运行build一次然后退出。

$ gulp watch> 将开始观看（ctrl-c退出）。

$ gulp> 将执行build，完成后它将运行watch（ctrl-c退出）。

注意：我使用gulp-sequence插件来确保在运行时$ gulp构建将在手表开始之前完成。

Answer 3

gulp.watch 返回一个 FSWatcher 对象，它有一个 .close() 方法，您可以调用它来取消监视任务：

var watchStream = gulp.watch(
    src, 
    {ignoreInitial: true},
    myGulpTask)

    .on("change", function (triggerFileName) {
        watchStream.close();
    });

ignoreInitial = true防止任务在观察者启动时运行。watchStream.close()将取消观察者，但任务将运行一次。总而言之，您可以运行一项任务。

这是 Gulp 4。