問題描述

我正在嘗試改善我的 Node.js 中的 DEV 體驗.為此，我想:

a) 更改服務器端代碼時重新啟動我的服務器
b) 當客戶端代碼發生變化時刷新瀏覽器.

為了實現這一點，我開始集成 nodemon 和browserSync 到我的 gulp 腳本中.

I am trying to improve the DEV experience in my Node. To do that, I want to:

a) restart my server when server-side code is changed
b) refresh the browser when client-side code is changes.

In an effort to accomplish this, I began integrating nodemon and browserSync into my gulp script.

在我的 gulp 腳本中，我有以下任務:

In my gulp script, I have the following task:

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/.我的應用程序按預期可見.但是，在控制臺窗口中，我注意到:

When the above task runs, my browser opens to http://localhost:3000/. My app is visible as expected. However, in the console window, I notice:

Error: listen EADDRINUSE :::3002

我在某種程度上理解.我的 server.js 文件中有 app.set('port', process.env.PORT || 3002); .然而，我認為這是設置代理值的目的.盡管如此，每當我更改代碼時，我都會在控制臺窗口中看到以下相關錯誤:

I understand to some extend. I have app.set('port', process.env.PORT || 3002); in my server.js file. Yet, I thought that was purpose of setting the proxy value. Still, whenever I make a code change, I see the following related error in my console window:

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

此時，我的代碼更改不會出現在我的瀏覽器中.我不明白我做錯了什么.我懷疑我的端口配置錯誤.但是，我不確定它們應該如何設置.

At this point, my code changes do not appear in my browser. I do not understand what I'm doing wrong. I suspect I have my ports misconfigured. But, I'm not really sure how they should be setup.

默認情況下，BrowserSync 使用端口 3000.BrowserSync 還為 BrowserSync UI 使用端口 3001.由于這兩個原因，我想我應該在 server.js 文件中將端口設置為 3002 并創建上面顯示的代理.我做錯了什么?

By default BrowserSync uses port 3000. BrowserSync also uses port 3001 for the BrowserSync UI. For these two reasons, I thought I would set the port to 3002 in my server.js file and create the proxy shown above. What am I doing wrong?

推薦答案

你實際上不需要使用 gulp 來工作.

You actually don't need to use gulp for this to work.

a) 更改服務器端代碼時重新啟動我的服務器

a) restart my server when server-side code is changed

使用 npm i -g nodemon 全局安裝 nodemon，然后在您的應用文件夾中執行 nodemon 或 nodemon ${index-file-of-your-app}.