Gulp Watch 和 Nodemon 冲突

Posted 2023-03-08

【中文标题】Gulp Watch 和 Nodemon 冲突

【英文标题】：Gulp Watch and Nodemon conflict

【发布时间】：2014-06-23 18:23:07

【问题描述】：

简短地说：最近开始使用 Gulp（从 Grunt 转换），并且我尝试将 Gulp 的默认监视任务（不是来自 npm 的 gulp-watch）用于 SASS/JS/html 和 gulp-nodemon（来自 npm）更改后重新启动 Express 服务器。仅运行gulp watch 时，它工作正常；并且在运行gulp server（对于nodemon）时工作正常。但是，同时使用两者（如下所示的默认任务配置），手表的东西不起作用。该任务正在运行，并且在 CLI gulp 上显示监视任务的“正在启动”和“已完成”，但文件不会更新。

相关任务配置：

连接 javascript：

    gulp.task('js:app', function()
        return gulp.src([
            pathSource('js/application/modules/**/*.js'),
            pathSource('js/application/_main.js')
        ])
        .pipe(concat('application.js'))
        .pipe(gulp.dest('./build/assets/js')).on('error', utils.log);
    );

Nodemon，对 express 应用的更改重新启动：

    gulp.task('express', function()
        return nodemon(script:'server.js', ext:'js', cwd: __dirname + '/express', legacyWatch: true)
        .on('restart', function()
            //gulp.run('watch'); // doesn't work :(
        );
);

观察 javascript 变化，并运行 js:app 进行连接。

    gulp.task('watch', function()
      gulp.watch(pathSource('js/application/**/*.js'), ['js:app']);
    );

默认任务，同时初始化 gulp watch 和 nodemon：

    gulp.task('default', ['watch', 'express']);

如果有人有任何想法，请提前致谢！

【参考方案1】：

gulp.run 电话一直是deprecated，所以我会尝试不同的方法。既然您已经在使用gulp，我可以建议您试试gulp-nodemon 吗？

根据 gulp-nodemon documentation，您可以向其传递要执行的任务数组：

更新：这是完整的 gulpfile.js 文件，以及工作示例 on github。

'use strict';

// Main dependencies and plugins
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');

var assets = 'assets/js/**/*.js';
var publicDir = 'public/javascripts';

// Lint Task
gulp.task('lint', function () 
  return gulp.src(assets)
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
);

// Concatenate and minify all JS files
gulp.task('scripts', function () 
  return gulp.src(assets)
    .pipe(concat('global.js'))
    .pipe(gulp.dest(publicDir))
    .pipe(rename('global.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(publicDir));
);

// Watch Files For Changes
gulp.task('watch', function () 
  gulp.watch(assets, ['lint', 'scripts']);
);

gulp.task('demon', function () 
  nodemon(
    script: 'server.js',
    ext: 'js',
    env: 
      'NODE_ENV': 'development'
    
  )
    .on('start', ['watch'])
    .on('change', ['watch'])
    .on('restart', function () 
      console.log('restarted!');
    );
);

// Default Task
gulp.task('default', ['demon']);

这样，您在 nodemon 启动时生成 watch 任务，并确保在 nodemon 重新启动您的应用程序时再次触发 watch 任务。

编辑：看来你应该调用changeevent from gulp-nodemon，它将在restart 事件触发之前处理编译任务。

编辑：似乎 nodemon 的 on('change', callback) 已从他们的 API 中删除

【讨论】：

gaston - 我正在使用的设置实际上已经带有 gulp-nodemon；但是，我没有对其进行配置，以便它在更改时重新启动监视任务。我会试一试，让你知道。谢谢！

所以无法让它以这种方式工作。让我感到困惑的是：如果我像这样运行 nodemon 任务：gulp.task('demon', ['watch'], function() nodemon(...) )，nodemon 和 watch 任务都将执行并在文件更改时显示输出 - 但 watch 任务的更改不会写入适当的文件。就像任务运行一样，但它没有将更改通过管道传输到磁盘。

@jiveTurkey 我已经用完整的 gulpfile 更新了我的答案，并留下了一个有效的github sample。基本上，这将启动nodemon 并将其与gulp-watch 任务链接以监控文件更改。让我知道进展如何;)

感谢您的回答，加斯顿。这就像一个魅力，真的帮助了我！在我的 gulpfile.js 中，我删除了 .on('change', ['watch'])，因为 watch 任务运行了两次，一次是在更改之前，一次是在服务器重新启动之后。

@Gaston - 再次感谢您的帮助，不幸的是，上述方法并没有解决问题（尽管它让我走上了正确的轨道:)。似乎独立运行“watch”任务或“nodemon”任务都可以正常工作。但是，如果 nodemon 配置有cwd: 'something_relative_here'，那将影响监视任务使用的路径。你会认为它们是完全隔离的，但由于某种原因，nodemon 中的 cwd 属性会影响 gulp.watch(...) 配置中的路径。解决方案是使路径成为绝对路径。不理想。将在下面发布完整的解释。

【参考方案2】：

FWIW，似乎在 gulp-nodemon 的配置上使用 cwd 参数实际上将整个 gulp cwd 设置为该目录。这意味着未来的任务将在错误的目录中执行。

我在前端服务器上同时运行 gulp watch 任务和后端服务器上的 nodemon 任务时遇到了这个问题（在同一个 gulpfile 中），如果先执行 nodemon 命令，前端会出现竞争情况东西实际上会构建到 (Home)/backend/frontend 而不是 (Home)/frontend 中，并且一切都会从那里变成梨形。

我发现在 gulp-nodemon 上使用 watch 和 script 参数可以解决这个问题（尽管它看起来仍然像 nodemon 正在监视我的整个项目而不是构建的后端目录）。