Question

在glob匹配中编辑文件时，以下Gulpjs任务正常工作：

// watch task.
gulp.task('watch', ['build'], function () {
    gulp.watch(src + '/js/**/*.js', ['scripts']);
    gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
    gulp.watch(src + '/less/*.less', ['styles']);
    gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});

// build task.
gulp.task('build', ['clean'], function() {
    return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});

然而，对于新文件或已删除的文件，它不起作用（它未被触发）。我有什么遗失的吗？

编辑：即使使用grunt-watch插件，它似乎无法正常工作：

gulp.task('scripts', function() {
    return streamqueue(
        { objectMode: true },
        gulp.src([
            vendor + '/jquery/dist/jquery.min.js',
            vendor + '/bootstrap/dist/js/bootstrap.min.js'
        ]),
        gulp.src([
            src + '/js/**/*.js'
        ]).pipe(plugins.uglify())
    )
    .pipe(plugins.concat(pkg.name + '.min.js'))
    .pipe(gulp.dest(dest + '/js/'));
});

gulp.task('watch', ['build'], function () {
    plugins.watch({glob: src + '/js/**/*.js'}, function () {
        gulp.start('scripts');
    });
});

编辑：解决了，this issue。以./开头的Glob（即src的值）似乎无法使用ATM。

Answer 1

修改：显然gulp.watch现在可以处理新文件或已删除的文件。当问到这个问题时，它没有。

我的其余答案仍然有效：gulp-watch通常是更好的解决方案，因为它只允许您对已修改的文件执行特定操作，而gulp.watch只允许您运行完整的任务。对于合理大小的项目，这很快就会变得太慢而无法使用。

你没有遗漏任何东西。 gulp.watch不适用于新文件或已删除文件。这是一个专为简单项目设计的简单解决方案。

要查看可以查找新文件的文件，请使用功能更强大的the gulp-watch plugin。用法如下：

var watch = require('gulp-watch');

// in a task
watch({glob: <<glob or array of globs>> })
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
    gulp.start( <<task name>> );
});

我个人推荐第一个选项。这允许更快的每文件进程。只要你没有连接任何文件，它在livereload开发期间效果很好。

您可以使用my lazypipe library或仅使用函数stream-combiner来整理您的信息流：

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch({glob: 'src/scripts/**/*.js' })
        .pipe(scriptsPipeline());

更新 2014年10月15日

正如下面的@pkyeck指出的那样，显然gulp-watch的1.0版本稍微改变了格式，所以上面的例子现在应该是：

var watch = require('gulp-watch');

// in a task
watch(<<glob or array of globs>>)
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
    gulp.start( <<task name>> );
});

和

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch('src/scripts/**/*.js')
        .pipe(scriptsPipeline());

Answer 2

gulp.watch()和require('gulp-watch')()都会触发新/已删除的文件，但如果使用绝对目录则不会。在我的测试中，我没有将"./"用于相对目录BTW。

如果删除了整个目录，则两者都不会触发。

   var watch = require('gulp-watch');
   //Wont work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though.
   //gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {

   //gulp.watch('src/app1/reports/**/*', function (event) {
   // console.log('*************************** Event received in gulp.watch');
   // console.log(event);
   // gulp.start('localDeployApp');
   });

   //Won't work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
   //watch(config.localDeploy.path + '/reports/**/*', function() {

   watch('src/krfs-app/reports/**/*', function(event) {
      console.log("watch triggered");
      console.log(event);
      gulp.start('localDeployApp');
   //});

Answer 3

如果src是绝对路径（从/开始），则代码不会检测新文件或已删除文件。但是还有一种方法：

而不是：

gulp.watch(src + '/js/**/*.js', ['scripts']);

写：

gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

它会起作用！

Answer 4

Globs必须指定一个单独的基目录，并且不能在glob本身中指定基本位置。

如果您有lib/*.js，则会查看当前工作目录process.cwd()

Gulp使用Gaze观看文件，在Gulp API doc我们看到我们可以将Gaze特定选项传递给watch函数：gulp.watch(glob[, opts], tasks)

现在在Gaze doc我们可以发现当前工作目录（glob base dir）是cwd选项。

这引出了我们对alexk的回答： gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

Answer 5

我知道这是一个较老的问题，但我想我会抛出我提出的解决方案。我找到的gulp插件都没有通知我新的或重命名的文件。所以我最终将单片眼镜包装在便利功能中。

以下是如何使用该功能的示例：

watch({
    root: config.src.root,
    match: [{
      when: 'js/**',
      then: gulpStart('js')
    }, {
      when: '+(scss|css)/**',
      then: gulpStart('css')
    }, {
      when: '+(fonts|img)/**',
      then: gulpStart('assets')
    }, {
      when: '*.+(html|ejs)',
      then: gulpStart('html')
    }]
  });

我应该注意到gulpStart也是我做的一个便利功能。

这是实际的手表模块。

module.exports = function (options) {
  var path = require('path'),
      monocle = require('monocle'),
      minimatch = require('minimatch');

  var fullRoot = path.resolve(options.root);

  function onFileChange (e) {
    var relativePath = path.relative(fullRoot, e.fullPath);

    options.match.some(function (match) {
      var isMatch = minimatch(relativePath, match.when);
      isMatch && match.then();
      return isMatch;
    });
  }

  monocle().watchDirectory({
    root: options.root,
    listener: onFileChange
  });
};

很简单，嗯？整个事情可以在我的gulp入门套件中找到：https://github.com/chrisdavies/gulp_starter_kit

Answer 6

值得注意的是，看起来gulp.watch只报告Windows上已更改和删除的文件，但默认情况下会在OSX上侦听新文件和已删除文件：

https://github.com/gulpjs/gulp/issues/675

Answer 7

你应该使用＆＃39; gulp-watch＆＃39;用于新/重命名/删除的文件而不是gulp.watch

{{1}}

Gulps gulp.watch没有触发新的或删除的文件？

7 个答案: