Node.js-自动刷新开发 [英] Node.js - Auto Refresh In Dev

问题描述

我正在尝试改善Node中的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}.

Install nodemon globally using npm i -g nodemon then on your app folder do nodemon or nodemon ${index-file-of-your-app}.

b)更改客户端代码后刷新浏览器.

b) refresh the browser when client-side code is changes.

使用browserify或Webpack.我更喜欢使用webpack；您可能需要稍微了解一下配置，但是webpack的好处是您不需要刷新它.找到更改后，更改将自动反映在浏览器中. https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

Use browserify or webpack. I prefer using webpack; you may need to learn about the configuration a little bit but the good thing with webpack is that you don't need to refresh it. Once changes are found the changes will be reflected on the browser automatically. https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

这篇关于Node.js-自动刷新开发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！