吞饮而尽。注意没有触发新的或删除的文件?

The following Gulpjs task works fine when editing files in the glob match:

在glob match中编辑文件时，以下的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');
});

However it doesn't work (it's not triggered) for new or deleted files. Is there something I'm missing?

但是，对于新的或已删除的文件，它不能工作(没有被触发)。有什么东西我丢了吗?

EDIT: even using grunt-watch plugin it seems not working:

编辑:即使使用垃圾手表插件，它似乎也不能工作:

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

EDIT: Solved, it was this issue. Globs starting with ./ (that was the value of src) seems not working ATM.

编辑:解决了，就是这个问题。从。/ (src的值)开始的Globs似乎不能运行ATM。

7 个解决方案

#1

124

Edit: Apparently gulp.watch does work with new or deleted files now. It did not when the question was asked.

编辑:显然吞咽。watch现在确实可以处理新文件或已删除的文件。当被问到这个问题时，情况并非如此。

The rest of my answer still stands: gulp-watch is usually a better solution because it lets you perform specific actions only on the files that have been modified, while gulp.watch only lets you run complete tasks. For a project of a reasonable size, this will quickly become too slow to be useful.

我的其余答案仍然成立:gulp-watch通常是更好的解决方案，因为它只允许您对已修改的文件执行特定操作，而gulp。手表只允许你运行完整的任务。对于一个合理规模的项目来说，这将很快变得太慢而无用。

You aren't missing anything. gulp.watch does not work with new or deleted files. It's a simple solution designed for simple projects.

你没有丢失任何东西。饮而尽。watch不能处理新的或已删除的文件。它是为简单项目设计的简单解决方案。

To get file watching that can look for new files, use the gulp-watch plugin, which is much more powerful. Usage looks like this:

要获取可以查找新文件的文件，请使用gulp-watch插件，它的功能要强大得多。使用看起来像这样:

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

Personally, I recommend the first option. This allows for much faster, per-file processes. It works great during development with livereload as long as you aren't concatenating any files.

我个人推荐第一种选择。这允许更快的每个文件进程。在开发livereload时，只要不连接任何文件，它就可以很好地工作。

You can wrap up your streams either using my lazypipe library, or simply using a function and stream-combiner like this:

你可以使用我的lazypipe库来结束你的流，也可以使用如下的函数和流组合器:

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

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

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

UPDATE October 15, 2014

2014年10月15日更新

As pointed out by @pkyeck below, apparently the 1.0 release of gulp-watch changed the format slightly, so the above examples should now be:

@pkyeck在下面指出，显然1.0版的gulp-watch稍微改变了格式，所以上面的例子应该是:

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

and

和

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

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

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

#2

Both gulp.watch() and require('gulp-watch')() will trigger for new/deleted files however not if you use absolute directories. In my tests I did not use "./" for relative directories BTW.

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

Both won't trigger if whole directories are deleted though.

如果整个目录被删除，这两个都不会触发。

   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');
   //});

#3

If src is an absolute path (starting with /), your code is not going to detect new or deleted files. However there's still a way:

如果src是一个绝对路径(以/开头)，那么您的代码将不会检测新的或删除的文件。不过还是有办法的:

Instead of:

而不是:

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

write:

写:

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

and it will work!

它会工作!

#4

Globs must have a separate base directory specified and that base location must not be specified in the glob itself.

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

If you have lib/*.js, it'll look under the current working dir which is process.cwd()

如果你有*/ *。js，它会在当前工作目录(process.cwd())下查找

Gulp uses Gaze to watch files and in the Gulp API doc we see that we can pass Gaze specific options to the watch function: gulp.watch(glob[, opts], tasks)

Gulp使用凝视来查看文件，在Gulp API doc中，我们可以将凝视特定的选项传递给watch函数:Gulp。手表(水珠,选择,任务)

Now in the Gaze doc we can find that the current working dir (glob base dir) is the cwd option.

现在在凝视文档中，我们可以发现当前工作的dir (glob base dir)是cwd选项。

Which leads us to alexk's answer: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

这就引出了alexk的答案:gulp.watch('js/**/* *)。js”{慢性消耗病:src },(“脚本”));

#5

I know this is an older question, but I thought I'd throw the solution I came up with. None of the gulp plugins I found would notify me of new or renamed files. So I ended up wrapping monocle in a convenience function.

我知道这是一个古老的问题，但我认为我应该提出我的解决方案。我发现的gulp插件中没有一个会通知我新的或重命名的文件。所以我把monocle包装在一个方便的函数中。

Here's an example of how that function is used:

这里有一个如何使用这个函数的例子:

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')
    }]
  });

I should note that gulpStart is also a convenience function I made.

我应该注意到，gulpStart也是我做的一个方便函数。

And here is the actual watch module.

这是实际的观察模块。

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

Pretty simple, eh? The whole thing can be found over at my gulp starter kit: https://github.com/chrisdavies/gulp_starter_kit

很简单,不是吗?在我的gulp starter kit上可以找到整个过程:https://github.com/chrisdavies/gulp_starter_kit

#6

It is important to note that it looks like gulp.watch only reports changed and deleted files on Windows but listens for new and deleted files by default on OSX:

重要的是要注意，它看起来就像gulp。只查看Windows上更改和删除的文件，但默认情况下监听OSX上的新文件和删除文件:

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

#7

You should use 'gulp-watch' for new/renamed/deleted files instead of gulp.watch

你应该对新/重命名/删除的文件使用“gulp-watch”，而不是“gulp.watch”

var gulpwatch = require('gulp-watch');
var source = './assets',  
destination = './dest';
gulp.task('copy-changed-assets', function() {
    gulpwatch(source+'/**/*', function(obj){
        gulp.src( obj.path, { "base": source})
        .pipe(gulp.dest(destination));
    });
});

#1

124