Question

我想使用browsersync运行nodemon，以便我可以立即看到代码中的更改。我已经有一个来自yeoman gulp-angular的设置环境所以我想避免使用肝脏等并坚持预设，除非有很大的原因。

我用'gulp：serve＆＃39;

启动我的服务器

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

监视本身会触发两个函数，一个将scriptTag插入index.html以加载angularTemplateCache。第二个获取所有html文件并将其保存到templateCache.js中。第二个需要复制所有css＆amp;的任务。 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的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。

祝你好运！

gulp-nodemon + browserSync：没有方法＆＃39; spawnSync＆＃39; ＆安培;装载时间长

1 个答案: