gulp-nodemon + browser-sync:服务器端代码更改后应用程序不会重新加载
Posted
技术标签:
【中文标题】gulp-nodemon + browser-sync:服务器端代码更改后应用程序不会重新加载【英文标题】:gulp-nodemon + browser-sync: app does not reload after changes in server side code 【发布时间】:2016-05-25 00:45:24 【问题描述】:应该是直截了当,但找不到问题。
对公共文件的模板所做的更改都会通过浏览器同步进行更新。但是,对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
【问题讨论】:
【参考方案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”。在 Windows 7 上,32 位。使用电源外壳
gulp-nodemon + browser-sync:服务器端代码更改后应用程序不会重新加载
更改 *.js 文件后,页面重新加载非常缓慢(~30sec-2min)[express+gulp+gulp-nodemon+browser-sync]