Node.js - 在Dev中自动刷新

Question

我正在尝试改善我的节点中的DEV体验.为此,我想:

a)在更改服务器端代码时重新启动服务器
b)在客户端代码更改时刷新浏览器.

为了实现这一目标,我开始将nodemon和browserSync集成到我的gulp脚本中.

在我的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

我在某种程度上理解.我有app.set('port', process.env.PORT || 3002);我的server.js文件.然而,我认为这是设置代理值的目的.不过,每当我进行代码更改时,我在控制台窗口中都会看到以下相关错误:

[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

您可以同时使用“livereload”、“connect-livereload”和“nodemon”包，将前端和后端更改实时重新加载到浏览器。另外，这样你就不需要 Gulp 或 Grunt。以下是这些包如何一起发挥作用：

• livereload打开高端口并通知浏览器公共文件发生变化
• connect-livereloadMonkey 使用连接到此高端口的代码片段修补每个提供的 HTML 页面
• nodemon然后用于在更改的后端文件上重新启动服务器

在 Express 中设置 livereload

设置 Express 以启动 livereload 服务器来监视公共目录并在 nodemon 引起的重新启动期间对浏览器执行 ping 操作：

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

使用 nodemon 启动 Express

然后，您可以使用 nodemon 启动服务器，例如，通过运行 来使用专用的监视脚本npm run watch。

这里的关键点是忽略已经被 livereload 监视的公共目录。您还可以配置要观看的具有非默认扩展名的文件，例如 pug 和 Mustache。

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

您可以在“使用 Express、LiveReload 和 Nodemon 刷新浏览器的前端和后端更改”中阅读更长的说明。