Node.js – 自动刷新在Dev

我正在尝试改进我的节点中的DEV经验。 要做到这一点,我想:

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 

我理解了一些。 我有app.set('port', process.env.PORT || 3002); 在我的server.js文件中。 然而,我认为这是设定代理价值的目的。 不过,无论何时更改代码,我都会在控制台窗口中看到以下相关错误:

 [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) 

此时,我的代码更改不会显示在我的浏览器中。 我不明白我做错了什么。 我怀疑我有我的端口configuration错误。 但是,我不确定他们应该如何设置。

默认情况下,BrowserSync使用端口3000. BrowserSync还使用BrowserSync UI的端口3001。 由于这两个原因,我以为我会在我的server.js文件中设置端口为3002,并创build上面显示的代理。 我究竟做错了什么?

你实际上不需要使用这个gulp工作。

a)当服务器端代码改变时重启我的服务器

使用npm i -g nodemon nodemon全局安装nodemon,然后在您的应用程序文件夹中执行nodemonnodemon ${index-file-of-your-app}

b)当客户端代码改变时刷新浏览器。

使用browserify或webpack。 我更喜欢使用webpack; 你可能需要稍微了解一下这个configuration,但是使用webpack的好处是你不需要刷新它。 一旦发现更改,更改将自动反映在浏览器上。 https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

我可能会错过一些上下文(例如,我不知道什么input代表),但是,我认为这个 NPM模块可能会解决您的问题。 下面是npm包页面的一个例子:

 var express = require('express') , http = require('http') , path = require('path') , reload = require('reload') , bodyParser = require('body-parser') , logger = require('morgan') var app = express() var publicDir = path.join(__dirname, '') app.set('port', process.env.PORT || 3000) app.use(logger('dev')) app.use(bodyParser.json()) //parses json, multi-part (file), url-encoded app.get('/', function(req, res) { res.sendFile(path.join(publicDir, 'index.html')) }) var server = http.createServer(app) //reload code here //optional reload delay and wait argument can be given to reload, refer to [API](https://github.com/jprichardson/reload#api) below reload(server, app, [reloadDelay], [wait]) server.listen(app.get('port'), function(){ console.log("Web server listening on port " + app.get('port')); }); 

EADDRINUSE错误通常是由于在指定的端口上已经打开连接。 这可能是由于在重新启动应用程序时以前的连接实例没有正确closures。

看一下这个要点 ,特别是在你的大文件中尝试这样的事情:

 'use strict'; var gulp = require('gulp'); var browserSync = require('browser-sync'); var nodemon = require('gulp-nodemon'); gulp.task('default', ['browser-sync'], function () {}); gulp.task('browser-sync', ['nodemon'], function() { browserSync.init(null, { proxy: "http://localhost:3002" }); }); gulp.task('nodemon', function (cb) { var started = false; return nodemon({ script: 'app.js' }).on('start', function () { // to avoid nodemon being started multiple times if (!started) { cb(); started = true; } }); }); 

@mateeyow是对的。

但是,如果你想浏览器自动重新加载,你还需要livereload-plugin。

启用webpack-hot-replacement只能replace浏览器内存中的代码,livereload-plugin会重新加载它。

以摇滚为例: https : //github.com/orange727/rock/blob/master/app/templates/webpack/webpack.make.js#L255

就像:

 webpackConfig.plugins: [ new webpack.HotModuleReplacementPlugin(), new LiveReloadPlugin({ appendScriptTag: true, port: config.ports.livereload, })];