CODEWITHSUNDEEP
gulpnodemon
Andi Giga
Andi Giga

Reputation: 4162

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

I want to run nodemon with browsersync, so that I can see changes in my code instantly. I already had a setup environment from yeoman gulp-angular so I want to avoid using liverload etc. and stick to the preset unless there is a huge reason.

I start my server with `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'
  ]);

});

Before browserSync is called the task node is required otherwise the routes would run into nothing:

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

The task node starts gulp-nodemon and trigers watch to build and watch the application.

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 itself triggers two functions, one which inserts a scriptTag into index.html to load angularTemplateCache. And a second one which takes all html files and saves them into a templateCache.js. The second one reqires a task which copies all css & js files.

Question 1):

When I change files, it throws the error:

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

Question 2):

When I start the function, all works but it loads very long. I can speed up the loading by manually refreshing the tab which broserSync opened.

EDIT 1:

Gulp-nodemon watches the files in the directory for changes so I removed gulp-watch to exclude a source for errors. The spawnSync error stays:

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

Edit 2:

I could solve the long loading time issue by moving the browsersync init function into the on start event of nodemon. maybe nodemon wasn't fully loaded before.

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

Upvotes: 0

Views: 1351

Answers (1)

undassa
undassa

Reputation: 68

Problem is in your node.js version. In the latest update of gulp-nodemon you can see, that 0.12.x required. So if you installed new version of gulp-nodemon, on lower node.js you'll see that error.

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

You may update node and the second way is to install previous version of gulp-nodemon.

Good luck!

Upvotes: 2

Related Questions