gulp-nodemon + browserSync：沒有方法'spawnSync'且加載時間長

Question

我想使用browsersync運行nodemon，以便可以立即查看代碼中的更改。 我已經從yeoman gulp-angular建立了一個安裝環境，因此除非有充分的理由，否則我要避免使用liverload等，並堅持使用預設。

我用`gulp：serve'啟動服務器

gulp.task('serve', ['node'], function () {
  browserSyncInit([
    paths.tmp + '/serve',
    paths.src
  ], [
    paths.tmp + '/serve/{app,components}/**/*.css',
    paths.tmp + '/serve/{app,components,node,config}/**/*.js',
    paths.src + 'src/assets/images/**/*',
    paths.tmp + '/serve/*.html',
    paths.tmp + '/serve/{app,components}/**/*.html',
    paths.src + '/{app,components}/**/*.html'
  ]);

});

在調用browserSync之前，任務節點是必需的，否則路由將不起作用：

gulp.task('node',['watch'], function(){
  return nodemon({
    script: paths.tmp + '/serve/server.js',
    ext: 'js html',
    tasks: ['browserSync'],
    env: { 'NODE_ENV': 'development' } ,
    nodeArgs: ['--debug=9999']
  });
});

任務節點啟動gulp-nodemon，trigers監視構建和監視應用程序。

gulp.task('watch', ['templateCache', 'images_tmp', 'partials_tmp'], function () {
  gulp.watch([
    paths.src + '/*.html',
    paths.src + '/{app,components}/**/*.scss',
    paths.src + '/{app,components}/**/*.js',
    paths.src + '/{app,components,node,config}/**/*.coffee',
    'bower.json'
  ], ['templateCache', 'partials_tmp']);
});

Watch本身會觸發兩個函數，一個函數將scriptTag插入index.html以加載angularTemplateCache。 第二個則接收所有html文件並將其保存到templateCache.js中。 第二個任務要求復制所有css和js文件的任務。

問題1）：

當我更改文件時，它會引發錯誤：

gulp-nodemon/index.js:76
cp.spawnSync('gulp', tasks, { stdio: [0, 1, 2] })
   ^
TypeError: Object #<Object> has no method 'spawnSync'

問題2）：

當我啟動該功能時，所有工作正常，但加載時間很長。 我可以通過手動刷新broserSync打開的選項卡來加快加載速度。

編輯1：

Gulp-nodemon監視目錄中的文件是否有更改，因此我刪除了gulp-watch以排除錯誤源。 spawnSync錯誤仍然存​​在：

gulp.task('node',['templateCache', 'images_tmp', 'partials_tmp'], function(){
  return nodemon({
    script: paths.tmp + '/serve/server.js',
    ext: 'js html coffee scss',
    tasks: ['templateCache', 'partials_tmp'],
    env: { 'NODE_ENV': 'development' } ,
    nodeArgs: ['--debug=9999']
  }).on('restart' , function onRestart() {
    console.log("################################restarted node");
    //Also reload the browsers after a slight delay
    setTimeout(function reload() {
      browserSync.reload({
        stream: false
      });
    }, 5000);
  });
});

編輯2：

我可以通過將browsersync初始化函數移到nodemon的on start事件中來解決加載時間長的問題。 也許nodemon之前沒有完全加載。

    gulp.task('node',['templateCache', 'images_tmp', 'partials_tmp'], function(cb){
  var called = false;
  return nodemon({
    script: paths.tmp + '/serve/server.js',
    ext: 'js html coffee scss',
    tasks: ['node'],
    env: { 'NODE_ENV': 'development' } ,
    nodeArgs: ['--debug=9999']
  })
  .on('start', function onStart() {
    if (!called) {
      cb();
      browserSyncInit([
        paths.tmp + '/serve',
        paths.src
      ], [
        paths.tmp + '/serve/{app,components}/**/*.css',
        paths.tmp + '/serve/{app,components,node,config}/**/*.js',
        paths.src + 'src/assets/images/**/*',
        paths.tmp + '/serve/*.html',
        paths.tmp + '/serve/{app,components}/**/*.html',
        paths.src + '/{app,components}/**/*.html'
      ]);
    }
    called = true;
  })
  .on('restart' , function onRestart() {
    console.log("################################restarted node");
    //Also reload the browsers after a slight delay
    setTimeout(function reload() {
      browserSync.reload({
        stream: false
      });
    }, 5000);
  });
});

Answer 1

問題出在您的node.js版本中。 在gulp-nodemon的最新更新中，您可以看到需要0.12.x。 因此，如果您安裝了新版本的gulp-nodemon，則在較低的node.js上，您將看到該錯誤。

https://github.com/JacksonGariety/gulp-nodemon/releases/tag/2.0.2

您可以更新節點，第二種方法是安裝先前版本的gulp-nodemon。

祝好運！