我正在尝试改善节点中的开发体验。为此,我希望:
a)当服务器端代码更改时重新启动服务器
B)当客户端代码改变时刷新浏览器。
为了实现这一点,我开始将nodemon和browserSync集成到我的gulp脚本中。
在我的gulp脚本中,我有以下任务:
gulp.task('startDevEnv', function(done) {
// Begin watching for server-side file changes
nodemon(
{ script: input.server, ignore:[input.views] })
.on('start', function () {
browserSync.init({
proxy: "http://localhost:3002"
});
})
;
// Begin watching client-side file changes
gulp.watch([ input.css, input.js, input.html ], function() { browserSync.reload(); });
done();
});
当上述任务运行时,我的浏览器打开到http://localhost:3000/。我的应用程序如预期一样可见。但是,在控制台窗口中,我注意到:
Error: listen EADDRINUSE :::3002
我在某种程度上理解了。我的server.js文件中有app.set('port', process.env.PORT || 3002);
。然而,我认为这就是设置代理值的目的。然而,每当我更改代码时,我都会在控制台窗口中看到以下相关错误:
[07:08:19] [nodemon] restarting due to changes...
[07:08:19] [nodemon] starting `node ./dist/server.js`
events.js:142
throw er; // Unhandled 'error' event
^
TypeError: args.cb is not a function
at Object.init (/Users/me/Website/Develop/node_modules/browser-sync/lib/public/init.js:25:25)
at null.<anonymous> (/Users/me/Website/Develop/gulpfile.js:142:25)
at emitNone (events.js:73:20)
at emit (events.js:167:7)
at Object.run (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:97:7)
at Function.run.kill (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:221:7)
at null.<anonymous> (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:333:7)
at emitOne (events.js:83:20)
at emit (events.js:170:7)
at restartBus (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/watch.js:162:7)
Me-MBP:Develop me$ events.js:142
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3002
at Object.exports._errnoException (util.js:856:11)
at exports._exceptionWithHostPort (util.js:879:20)
at Server._listen2 (net.js:1238:14)
at listen (net.js:1274:10)
at Server.listen (net.js:1370:5)
at Object.<anonymous> (/Users/me/Website/Develop/dist/server.js:70:8)
at Module._compile (module.js:399:26)
at Object.Module._extensions..js (module.js:406:10)
at Module.load (module.js:345:32)
at Function.Module._load (module.js:302:12)
此时,我的代码更改没有显示在浏览器中。我不知道我做错了什么。我怀疑我的端口配置错误。但是,我真的不知道应该如何设置它们。
默认情况下,BrowserSync使用端口3000。BrowserSync UI也使用端口3001。出于这两个原因,我想我应该在server.js文件中将端口设置为3002,并创建如上所示的代理。我做错了什么?
5条答案
按热度按时间jexiocij1#
实际上,你不需要用吞咽来实现这个功能。
a)当服务器端代码更改时重新启动服务器
使用
npm i -g nodemon
全局安装nodemon,然后在您的应用程序文件夹上执行nodemon
或nodemon ${index-file-of-your-app}
。B)当客户端代码改变时刷新浏览器。
使用browserify或webpack。我更喜欢使用webpack;您可能需要了解一些配置信息,但Webpack的好处是您不需要刷新它。一旦发现更改,这些更改将自动反映在浏览器上。https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
sd2nnvve2#
您可以同时使用'livereload'、'connect-livereload'和'nodemon'包将前端和后端的更改实时加载到浏览器中。而且,这样您就不需要Gulp或Grunt了。下面是这些包如何配合使用的:
livereload
打开一个高端口,并通知浏览器公共文件已更改connect-livereload
monkey用连接到这个高端口的代码片段修补每个提供的HTML页面nodemon
在更改的后端文件上重新启动服务器在Express中设置liverload
将Express设置为在nodemon引发的重新启动期间启动livereload服务器监视公共目录并ping浏览器:
使用nodemon启动Express
然后用nodemon启动服务器,例如,通过运行
npm run watch
使用专用的watch脚本。这里的关键点是忽略已经被livereload监视的公共目录。你也可以配置带有非默认扩展名的文件,比如pug和mustache,来监视它们。
您可以在"Refresh front and backend changes to browser with Express, LiveReload and Nodemon."中阅读更详细的说明
pcrecxhr3#
@mateeyow是对的。
但是如果你想让浏览器自动重新加载,你还需要livereload-plugin。
启用webpack-hot-replacement只替换浏览器内存中的代码,livereload-plugin会重新加载它。
请参见岩石示例:https://github.com/orange727/rock/blob/master/app/templates/webpack/webpack.make.js#L255
正如:
vmdwslir4#
我可能遗漏了一些上下文(例如,我不确定
input
代表什么),但是,我认为npm模块reload可能会解决您的问题。下面是npm包页面中的一个示例:dfty9e195#
EADDRINUSE错误通常是由于已在指定端口上打开连接所致。这可能是由于重新启动应用程序时未正确关闭该连接的前一个示例所致。
看一下this gist,特别是在gulp文件中尝试以下内容: