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

问题描述

缺点：最近开始使用Gulp（从Grunt转换），并且试图将SASS / JS / HTML和gulp-nodemon（从npm）这两个Gulp的默认监视任务（不是nul的gulp-watch）在更改后重新启动Express服务器。当运行 gulp watch 时，它工作正常;当运行 gulp服务器（对于nodemon）时，它工作正常。但是，一起使用（在默认任务的配置中显示），手表的东西不起作用。该任务正在运行，并且在CLI中，gulp显示了开始和完成以执行监视任务，但文件不更新。

相关任务配置：

Concat javascript：
$ b

  gulp （'js：application / modules / ** / *。js'），
 pathSource （'js / application / _main.js'）
]）
 .pipe（concat（'application.js'））
 .pipe（gulp.dest（'./ build / assets /js')).on('error'，utils.log）; 
}）; 
  

Nodemon，重启更改以显示应用程序：

  gulp.task（'express'，function（）{
 return nodemon（{script：'server.js'，ext：' （'restart'，function（）{
 //gulp.run('watch'）; // doesn' 't work :( 
））; 
}）; 
  

观看javascript更改，并运行js：app进行连接。

  gulp.task（'watch' ，函数（）{
 gulp.watch（pathSource（'js / application / ** / *。js'），['js：app']）; 
}）; 
  

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

  gulp.task（'default'，['watch'，'express']）; 
  

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

决方案

gulp.run 调用已经已弃用，所以我会尝试一种不同的方法。既然你已经在使用 gulp ，我可以建议给 gulp-nodemon 试试吗？

根据gulp-nodemon documentation ，你可以传递一个任务数组来执行：

UPDATE ：下面是完整的 gulpfile.js 文件，以及一个工作示例 on github 。

 'use strict'; 
 
 //主要依赖和插件
 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'; 
 $ b // Lint Task 
 gulp.task（'lint'，function（）{
 return gulp.src（assets）
 .pipe（jshint（）） 
 .pipe（jshint.reporter（'jshint-stylish'））; 
}）; 
 
连接并缩小所有JS文件
 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））; 
}）; 
 $ b $ //观察文件变化
 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！'）; 
}）; 
}）; 
 
 //默认任务
 gulp.task（'default'，['demon']）; 
  

通过这种方式，您可以产生 watch 任务在nodemon启动时，并确保每当nodemon重新启动应用程序时，都会再次触发 watch 任务。

编辑：好像你应该调用 change 来自gulp-nodemon的事件，它将处理重新启动事件触发器之前的编译任务。

$ b 编辑：看起来像nodemon < on（'change'，callback）已从 API 中移除

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.

Relevant task configurations:

Concat 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, restart on changes to express app:

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

Watch javascript changes, and run js:app for concat'ing.

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

Default task, to initialize gulp watch and nodemon simultaneously:

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

If anyone has any ideas, thanks in advance!

解决方案

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?

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

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

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.

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

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

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