Gulp Watch 和 Nodemon 冲突 [英] Gulp Watch and Nodemon conflict

问题描述

简短地说:最近开始使用 Gulp(从 Grunt 转换)，并且我尝试将 Gulp 的默认监视任务(不是来自 npm 的 gulp-watch)用于 SASS/JS/HTML 和 gulp-nodemon(来自 npm)更改后重新启动 Express 服务器.当只运行 gulp watch 时，它工作正常；并且在运行 gulp server (对于 nodemon)时可以正常工作.但是，同时使用两者(在默认任务的配置中显示如下)，手表的东西不起作用.任务正在运行，并且在 CLI 上 gulp 显示监视任务的开始"和完成"，但文件没有更新.

Short of it: started using Gulp recently (convert from Grunt), and am trying to use both Gulp's default watch task (not gulp-watch from npm) for SASS/JS/HTML and gulp-nodemon (from npm) to restart an Express server upon changes. When running just gulp watch, it works fine; and when running gulp server (for nodemon) that works fine. However, using both together (shown below in the configuration of the default task), the watch stuff isn't working. The task is running, and on the CLI gulp shows 'Starting' and 'Finished' for the watch tasks, but the files don't update.

相关任务配置:

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

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

If anyone has any ideas, thanks in advance!

推荐答案

gulp.run 调用已已弃用，所以我会尝试不同的方法.由于您已经在使用 gulp，我可以建议您提供 gulp-nodemon 试试?

gulp.run calls have been deprecated, so I'd try a different approach. Since you're already using gulp, may I suggest giving gulp-nodemon a try?

根据 gulp-nodemon documentation，您可以向它传递一个数组要执行的任务:

As per gulp-nodemon documentation, you can pass it an array of tasks to execute:

更新:这是完整的 gulpfile.js 文件，以及一个工作示例 在 github.

UPDATE: Here's the full gulpfile.js file, together with a working sample 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 任务.

This way, you spawn the watch task upon nodemon's start and ensure that the watch task is again triggered whenever nodemon restarts your app.

编辑:看来你应该调用on-change 来自 gulp-nodemon 的事件，它将在 restart 事件触发之前处理编译任务.

EDIT: seems you should be calling the on-change event from gulp-nodemon, which will handle compile tasks before the restart event triggers.

编辑:似乎 nodemon 的 on('change', callback) 从他们的 API

EDIT: It seems nodemon's on('change', callback) is removed from their API

这篇关于Gulp Watch 和 Nodemon 冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！