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, 
})];