BrowserSync 与 Nodemon 和 Express 服务器

Question

我这辈子都无法将 Browser Sync 和 Nodemon 运行很好地与我的 Express 服务器一起使用。我已经尝试了所有我能想到的组合。

我的 Express 服务器运行s 位于端口 5000，我可以打开并查看，nodemon 运行s 进行更改时，很好，但浏览器仍然没有 'hot refresh' 所以说话。我希望浏览器 window 在 nodemon 重新启动服务器后刷新或打开一个新选项卡。

package.json 个脚本

"scripts": {
"start": "node app.js",
"dev": "set NODE_ENV=DEV&& nodemon app.js 5000 browser-sync start --proxy localhost:5000 -e * --ignore=node_modules --reload-delay 10 --no-ui --no-notify",
"ui": "node app.js browser-sync start nodemon app.js --port=5001 --proxy=localhost:5000 -e * --ignore=node_modules --reload-delay 10 --no-ui --no-notify",
"ui2": "nodemon start & browser-sync start --proxy 'localhost:5000' -e * --ignore=node_modules"
},

我只想启动我的快速服务器，用 nodemon 监听变化，然后重新启动，然后重新加载浏览器 window 或启动一个新浏览器来查看变化。请帮助我了解我缺少什么？

Answer 1

万一有人遇到同样的问题，突然意识到我需要打开第二个终端 window 到运行 browser-sync。在 package.json 中使用以下脚本现在效果很好！

所以首先运行 npm run start/dev depending if you want server restarts on changes or not then open a 2nd terminal window and run npm 运行 ui`。在我的例子中，我的 app.js 在端口 8000 上启动。

package.json

 "scripts": {
    "start": "node app.js",
    "dev": "nodemon -e * app.js",
    "ui": "browser-sync start --proxy localhost:8000 --files=**/*  --ignore=node_modules --reload-delay 10000 --no-ui --no-inject-changes"
  },

app.js - const port = process.env.PORT || '8000';

Answer 2

这可以运行 (npm start) 与模块“npm-运行-all”或“并发”并行（将开始：string 替换为start_b string).

  "scripts": {
    "browsersync": "browser-sync start --proxy localhost:5000 --files 'public,views'",
    "nodemon": "nodemon server.js",
    "start_b": "concurrently --kill-others \"npm run nodemon\" \"npm run browsersync\" ",
    "start": "npm-run-all -p nodemon browsersync"
  },

在我的系统中，我在跟踪 .njk 文件时遇到问题，因为浏览器在更改它们后重新加载但实际上并没有更新更改。我必须使用 nodemon.json 文件来添加文件夹 (views/) 和扩展名 .njk:

{
  "watch": ["server.js", "views/"],
  "ext": "js, css, njk"
}

BrowserSync 与 Nodemon 和 Express 服务器

BrowserSync with Nodemon and Express Server

node.js

express

nodemon

browser-sync