gulp-nodemon + browser-sync: app does not reload after changes in server side code

Question

Should be straightforward, but can't find the issue.

The changes made to the templates to the public files all get updated by browser-sync. However, changes to app.js, ./bin/www and ./route/**/*.js cause browser-sync to refresh but apparently do not trigger nodemon to restart the app: I need to stop it and start it again manually.

I run my app using DEBUG=appName:* node ./bin/www & gulp

Here is my Gulpfile.js

//////////////////////////////////////
// Simple task to update our views  //
//////////////////////////////////////

var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync');

// the real stuff
gulp.task('default', ['browser-sync'], function () {
	gulp.watch('./views/**/*.jade', browserSync.reload);
	gulp.watch(['./routes/**/*.js', './bin/www', './app.js'], ['bs-reload-delay']);
});

// our browser-sync config + nodemon chain
gulp.task('browser-sync', ['nodemon'], function() {
	browserSync.init(null, {
		proxy: "http://localhost:3000",
        files: ["public/**/*.*"],
        browser: "chromium-browser",
        port: 4000,
	});
});

// our delayed reload for our server side js
gulp.task('bs-reload-delay', function () {
  setTimeout(function () {
    browserSync.reload({ stream: false });
  }, 800);
});

// our gulp-nodemon task
gulp.task('nodemon', function (cb) {
	var started = false;
	return nodemon({
		script: './app.js',
		ext: 'js',
		task: ['bs-reload-delay']
	}).on('start', function () {
		// to avoid nodemon being started multiple times
		if (!started) {
			cb();
			started = true;
		}
	}).on('crash', function() {
		console.log('nodemon.crash');
	}).on('restart', function() {
		console.log('nodemon.restart');
	});
});

And here is my dir

.
├── app.js
├── bin
│   └── www
├── config.js
├── Gulpfile.js
├── npm-debug.log
├── package.json
├── public
│   ├── css
│   │   └── style.css
│   ├── favicon.ico
│   ├── img
│   └── js
│       └── front-client.js
├── readme.md
├── routes
│   ├── client.js
│   ├── fire.js
│   └── game.js
└── views
    ├── client.jade
    ├── error.jade
    └── _layout.jade

Answer 1

Okay, figured it out. Maybe this could be useful others. the problem was caused by the gulp file and by how I started my app: DEBUG=appName:* node ./bin/www & gulp.

gulp-nodemon already starts my app within gulp, so there is no need to invoke node before gulp. Also, I am now using the env property to pass along my DEBUG & NODE_ENV variables. Now, to launch my app in develop mode, I just run gulp. Here is my Gulpfile.js

//////////////////////////////////////
// Simple task to update our views  //
//////////////////////////////////////

var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var bs = require('browser-sync').create();

// our browser-sync config + nodemon chain
gulp.task('browser-sync', ['nodemon'], function() {
	bs.init(null, {
		proxy: "http://localhost:3000",
		browser: "chromium-browser",
		port: 4000,
	});
});

// the real stuff
gulp.task('default', ['browser-sync'], function () {
	gulp.watch('./views/**/*.jade', bs.reload);
	gulp.watch('./public/**/*.js', bs.reload);
	gulp.watch('./public/**/*.css', bs.reload);
	gulp.watch(['./routes/**/*.js', './app.js', './bin/www'], ['bs-delay']);
});

// give nodemon time to restart
gulp.task('bs-delay', function () {
  setTimeout(function () {
    bs.reload({ stream: false });
  }, 1000);
});

// our gulp-nodemon task
gulp.task('nodemon', function (cb) {
	var started = false;
	return nodemon({
		script: './bin/www',
		ext: 'js',
		ignore: ['public/**/*.js'],
		env: {
			'NODE_ENV': 'development',
			'DEBUG': 'appname:*'
	 }
	}).on('start', function () {
		//avoid nodemon being started multiple times
		if (!started) {
			cb();
			started = true;
		}
	})
	.on('crash', function() {
		// console.log('nodemon.crash');
	})
	.on('restart', function() {
		// console.log('nodemon.restart');
	})
	.once('quit', function () {
		// handle ctrl+c without a big weep
		process.exit();
	});
});