Gulps gulp.watch 未为新文件或已删除文件触发?

IT技术 javascript node.js gulp
2021-02-22 04:35:30

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

编辑:解决了,就是这个问题./(即 的值src开头的 Glob似乎无法在 ATM 上工作。

6个回答

编辑:显然gulp.watch现在可以处理新的或删除的文件。问这个问题的时候没有。

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


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

要查看可以查找新文件的文件,请使用功能更强大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>> );
});

就个人而言,我推荐第一个选项。这允许更快的每个文件进程。只要您不连接任何文件,它就可以在使用 livereload 的开发过程中很好地工作。

您可以使用我的lazypipelibrary或简单地使用函数来结束您的流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 所指出的,显然 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>> );
});

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

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

watch('src/scripts/**/*.js')
        .pipe(scriptsPipeline());
@JHannes 你在回复什么?这就是这个答案要解释的内容。
2021-04-15 04:35:30
感谢您的帮助,但仍然无法正常工作。我是 Gulp 的新手(我用过几次 Grunt),也许我的主要任务是错误的......不知道。请参阅我更新的问题。
2021-04-18 04:35:30
很好地找到了那个错误。希望如果其他人遇到它会有所帮助!
2021-04-18 04:35:30
github.com/floatdrop/gulp-watch/issues/1以 './'开头的globs 不发射。我的 src 变量正好是“-/”。发现问题了!谢谢!
2021-04-19 04:35:30
gulp.start 是对非公共 API 方法的调用。有没有另一种方式来执行任务?
2021-05-03 04:35:30

双方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');
   //});
这可能应该是正确的答案 - 并不想安装另一个插件来观看。从我所有的 glob 中删除了 ./ 并完美运行!谢谢!
2021-04-16 04:35:30
是的 - 很多 gulp 示例都从./它们的路径开始- 实际上这似乎是不好的做法 - github.com/floatdrop/gulp-watch/issues/1
2021-04-20 04:35:30
这是最好的答案,不需要额外的module或理解疯狂的语法。
2021-04-22 04:35:30
优秀而简单的答案。
2021-04-24 04:35:30
这次真是万分感谢。我只是绞尽脑汁试图让gulp-watch工作正常以触发新文件或删除的文件。没必要!gulp.watch做这个。./从路径中删除所有内容可以解决问题。惊人的。
2021-04-27 04:35:30

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

代替:

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

写:

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

它会起作用!

它不能在一个数组中?那太糟糕了。排除项呢?如果不将源文件放入数组,就不可能进行排除。
2021-04-15 04:35:30
{ cwd: src }提示是我的解决方案。非常感谢你!
2021-04-16 04:35:30
非常感谢@alexk,{ cwd: src } 解决了我的问题。
2021-04-19 04:35:30
@DanielTonon 您是否错误地放入了一组文件?应该是一个直接参数watch
2021-05-03 04:35:30
很好的答案。进一步添加,如果您不想更改每个 glob 模式,只需添加{cwd:'./'}并保留 glob 模式,这样它就会变成gulp.watch('src/js/**/*.js', {cwd: './'}, ['scripts']);
2021-05-14 04:35:30

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

如果你有lib/*.js,它会在当前的工作目录下查看process.cwd()

Gulp 使用 Gaze 来监视文件,在Gulp API 文档中我们看到我们可以将特定于 Gaze 的选项传递给 watch 函数:gulp.watch(glob[, opts], tasks)

现在在Gaze 文档中,我们可以找到当前工作目录(glob base dir)是cwd选项。

这导致我们得到亚历克的回答: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

我知道这是一个较旧的问题,但我想我会抛出我想出的解决方案。我发现的所有 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。

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

嘿伙计,没有足够的人为此提供道具!它就像一个魅力,非常感谢。(答案省略了“gulpStart”的作用,因此可能会令人困惑,如果有人感兴趣,只需访问链接并前往utils文件夹即可)
2021-04-21 04:35:30