gulp-nodemon + browser-sync：服务器端代码更改后应用程序不会重新加载

Question

应该很直接，但是找不到问题。

对 public 文件的模板所做的更改全部由浏览器同步更新。但是，对 app.js、./bin/www 和 ./route/**/*.js 的更改会导致浏览器同步刷新，但显然不会触发 nodemon 重新启动应用程序：我需要停止它并手动重新启动它。

我运行我的应用使用 DEBUG=appName:* node ./bin/www & gulp

这是我的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');
 });
});

这是我的目录

.
├── 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

好的，明白了。也许这对其他人有用。问题是由 gulp 文件和我启动应用程序的方式引起的：DEBUG=appName:* node ./bin/www & gulp.

gulp-nodemon 已经在 gulp 内启动我的应用程序，因此无需在 gulp 之前调用节点。此外，我现在使用 env 属性来传递我的 DEBUG 和 NODE_ENV 变量。现在，要在开发模式下启动我的应用程序，我只需运行 gulp。这是我的 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();
 });
});

gulp-nodemon + browser-sync：服务器端代码更改后应用程序不会重新加载

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

javascript

express

nodemon

gulp

browser-sync