BrowserSync 与 Nodemon 和 Express 服务器答案

【问题标题】：BrowserSync with Nodemon and Express ServerBrowserSync 与 Nodemon 和 Express 服务器
【发布时间】：2026-01-11 10:20:07
【问题描述】：

在我的一生中，我无法让 Browser Sync 和 Nodemon 与我的 Express 服务器一起很好地运行。我已经尝试了所有我能想象到的组合。

我的 Express 服务器在端口 5000 上运行，我可以打开并查看它，nodemon 在进行更改时运行，很好，但可以说浏览器仍然没有“热刷新”。我想让浏览器窗口在 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"
},

我只想启动我的 express 服务器，使用 nodemon 监听更改然后重新启动，然后重新加载浏览器窗口或启动一个新窗口以查看更改。请帮助我了解我缺少什么？

【问题讨论】：

标签： node.js express browser-sync nodemon

【解决方案1】：

如果有人遇到同样的问题，那一刻我意识到我需要打开第二个终端窗口来运行浏览器同步。在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 run 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';

【讨论】：

【解决方案2】：

这可以与模块“npm-run-all”或“并发”并行运行 (npm start)（将 start: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"
}

【讨论】：