web-dev-qa-db-ja.com

GulpWatchとNodemonの競合

不足：最近Gulpの使用を開始し（Gruntから変換）、SASS/JS/HTML用のGulpのデフォルトの監視タスク（npmからのgulp-watchではない）とgulp-nodemon（npmから）の両方を使用してExpressを再起動しようとしています変更時にサーバー。 gulp watchだけを実行すると、正常に動作します。 gulp server（nodemonの場合）を実行すると、正常に動作します。ただし、両方を一緒に使用すると（以下のデフォルトタスクの構成に示されています）、監視機能は機能しません。タスクは実行中であり、CLIで、監視タスクの「開始」と「終了」が表示されますが、ファイルは更新されません。

関連するタスク構成：

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、エクスプレスアプリへの変更時に再起動：

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

誰かアイデアがあれば、よろしくお願いします！

gulpnodemon
14
jiveTurkey

_gulp.run_呼び出しは 非推奨 なので、別のアプローチを試してみます。すでにgulpを使用しているので、 gulp-nodemon を試してみることをお勧めしますか？

Gulp-nodemon documentation のように、実行するタスクの配列を渡すことができます。

[〜＃〜] update [〜＃〜]：これが完全な_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タスクが再度トリガーされるようにします。

[〜＃〜]編集[〜＃〜]： on -changegulp-nodemonからのイベント を呼び出す必要があるようです。これはコンパイルタスクbeforerestartイベントトリガー。

[〜＃〜] edit [〜＃〜]：nodemonのon('change', callback)が [〜 ＃〜] api [〜＃〜]

16
Gaston

FWIW、gulp-nodemonの構成でcwdパラメーターを使用すると、実際にはgulpcwd全体がそのディレクトリに設定されるようです。これは、将来のタスクが間違ったディレクトリで実行されることを意味します。

フロントエンドサーバーでgulpwatchタスクをバックエンドサーバー（同じgulpfile内）でnodemonタスクと同時に実行すると、この問題が発生しました。nodemonコマンドを最初に実行すると、フロントエンドのものが実際に実行されるという競合状態が発生しました。 （Home）/ frontendの代わりに（Home）/ backend/frontendに組み込むと、そこからすべてが洋ナシ型になります。

Gulp-nodemonでwatchおよびscriptparamsを使用すると、これを回避できることがわかりました（ただし、nodemonは、ビルドされたバックエンドディレクトリではなく、プロジェクト全体の変更を監視しているようです）。

4
pfooti