問題描述

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

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

為了實(shí)現(xiàn)這一點(diǎn)，我開始集成 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 腳本中，我有以下任務(wù):

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

當(dāng)上述任務(wù)運(yùn)行時，我的瀏覽器會打開 http://localhost:3000/.我的應(yīng)用程序按預(yù)期可見.但是，在控制臺窗口中，我注意到:

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); .然而，我認(rèn)為這是設(shè)置代理值的目的.盡管如此，每當(dāng)我更改代碼時，我都會在控制臺窗口中看到以下相關(guān)錯誤:

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)

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

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.

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

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?

推薦答案

你實(shí)際上不需要使用 gulp 來工作.

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

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

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

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