gulp-nodemon + browserSync: 没有方法 'spawnSync' & 加载时间长

Question

我想运行 nodemon 与 browsersync，这样我就可以立即看到代码中的更改。我已经从 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 watch来构建和监视应用程序。

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 init 函数移动到 nodemon 的启动事件中来解决加载时间长的问题。也许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。

祝你好运！

gulp-nodemon + browserSync: 没有方法 'spawnSync' & 加载时间长

gulp-nodemon + browserSync: has no method 'spawnSync' & long loading time

nodemon

gulp