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

问题描述

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

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-与-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屋！