Node.js - 自动刷新在发展

Question

我想改善我的节点的DEV体验。为此，我想：

a）当服务器端代码改变时重启我的服务器
b）当客户端代码改变时刷新浏览器。

为了实现这个目标，我开始将nodemon和browserSync集成到我的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还使用端口3001作为BrowserSync UI。出于这两个原因，我想我会在我的server.js文件中将端口设置为3002，并创建如上所示的代理。我究竟做错了什么？

Answer 1

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

a）在服务器端代码被更改

安装nodemon全球使用npm i -g nodemon然后在你的app文件夹做nodemon或nodemon ${index-file-of-your-app}重新启动我的服务器。

b）当客户端代码发生变化时刷新浏览器。

使用browserify或webpack。我更喜欢使用webpack;您可能需要了解一些配置，但使用webpack的好处是您无需刷新它。一旦发现更改，更改将自动反映在浏览器上。 https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

Answer 2

我可能会丢失一些情况下（例如，我不知道什么input代表），但是，我觉得this 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')); 
}); 

Answer 3

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

看看this gist，特别是尝试在一饮而尽文件是这样的：

'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; 
     } 
    }); 
}); 

Answer 4

@mateeyow是正确的。

但是，如果您希望浏览器自动重新加载，您还需要livereload-plugin。

启用webpack-hot-replacement只替换浏览器内存中的代码，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, 
})];