这就是我如何运行我的服务器 nodejs。当我在前端开发人员中更改代码时，我需要实时重新加载我的服务器
"start": "node server.js"
【问题讨论】：
标签： node.js reactjs express livereload
第一：
npm install -g nodemon
下一步在你的 package.json 中添加一个脚本行
"live": "nodemon server.js"
现在当你 npm live 时，它会重新加载
更多详情见https://github.com/remy/nodemon
更新如果还需要实时页面重新加载
npm install -g livereload
livereload . -w 1000 -d
【讨论】：
重启服务器是一回事，刷新浏览器是另一回事。对于服务器观看，我使用 nodemon。 Nodemon 可以查看任何类型的文件何时发生更改。但是 nodemon 无法刷新浏览器页面。为此，我使用浏览器同步。
我都在 gulp 中使用。
因此，package.json 的依赖项使其工作：
"devDependencies": {
"browser-sync": "^2.24.5",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}
在服务器文件中（我的服务器在./bin/www，你的可以在server.js、app.js或其他地方），express server监听3001端口。
var port = normalizePort(process.env.PORT || '3001');
var server = http.createServer(app);
server.listen(port);
接下来是在 gulp 中运行 nodemon 和浏览器同步。 gulpfile.js 的完整内容
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync').create();
gulp.task('gulp_nodemon', function() {
nodemon({
script: './bin/www', //this is where my express server is
ext: 'js html css', //nodemon watches *.js, *.html and *.css files
env: { 'NODE_ENV': 'development' }
});
});
gulp.task('sync', function() {
browserSync.init({
port: 3002, //this can be any port, it will show our app
proxy: 'http://localhost:3001/', //this is the port where express server works
ui: { port: 3003 }, //UI, can be any port
reloadDelay: 1000 //Important, otherwise syncing will not work
});
gulp.watch(['./**/*.js', './**/*.html', './**/*.css']).on("change", browserSync.reload);
});
gulp.task('default', ['gulp_nodemon', 'sync']);
当在终端运行 gulp 时，它将开始监视服务器并在任何文件更改时刷新浏览器。
虽然我们在 express 服务器中指定了端口 3001，但我们的应用程序将在端口 3002 上运行，因为我们在 browser-sync 中编写。 3001 将用作代理。
【讨论】：
gulp.task('default', gulp.series('gulp_nodemon', 'sync'));
gulp 会打印listening on *:3001，这是应用程序可以访问的唯一端口。 Nodemon 更新文件，但没有刷新浏览器。
exports.build = gulp.parallel(["gulp_nodemon", "sync"]); 编写 exports.build 使得 gulp build 命令在你的 npm 脚本中可用。
npm install browser-refresh -g
并添加你的主 js
if (process.send) {
process.send('online');
}
例如
app.listen(port, function() {
console.log('Listening on port %d', port);
if (process.send) {
process.send('online');
}
});
并在正文关闭标记之前添加您的索引页。
<script src="{process.env.BROWSER_REFRESH_URL}"></script>
并在终端上启动您的服务器而不是节点 server.js
browser-refresh server.js
【讨论】：
您可以使用“livereload”、“connect-livereload”和“nodemon”包将前端和后端更改实时加载到浏览器。这样你就不需要 Gulp。以下是这些包的组合方式：
livereload打开高端口，通知浏览器公共文件发生变化connect-livereload monkey 用连接到这个高端口的 sn-p 修补每个提供的 HTML 页面nodemon 在更改的后端文件上重新启动服务器在 Express 中设置 livereload
设置 Express 以在 nodemon 引起的重新启动期间启动 livereload 服务器并监视公共目录并 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"
},
您可以在"Refresh front and backend changes to browser with Express, LiveReload and Nodemon."阅读更长的解释
【讨论】：
const path = require("path") 来要求它。很多时候，这已经包含在应用程序设置处理路径中
我的设置示例：
livereload.js（所以这就是你的server.js，当然只使用livereload相关的部分，不需要更换你的开发服务器）
const path = require('path');
const fs = require('fs');
const livereload = require('livereload');
const lrserver = livereload.createServer();
const compiled = path.join( __dirname, "dist");
lrserver.watch( compiled );
const connect = require('connect');
const stat = require('serve-static');
const server = connect();
server.use( stat( compiled ));
server.listen( 3033 );
console.log( 'Dev server on localhost:3033' );
它实际上在 localhost 上启动了两台服务器：在 :35729 上监听的 livereload 服务器和在 :3033 上的静态文件服务器。
Livereload 观察到包含已编译文件（js、css、html）的dist 目录。您需要将此 sn-p 添加到应重新加载的每个 HTML 页面：
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>');
</script>
如果您不转译/编译/预处理您的 js/css/html 代码（即您直接编辑提供的文件），那么观察源目录即可。否则，您需要一个任务来监视源目录的更改并编译到 livereload 观察到的 dist 目录:)
我的 package.json 的相关部分：
"scripts": {
"build": "npm run build:js && npm run build:css",
"prewatch": "node livereload.js &",
"watch": "node ./node_modules/watch-run/bin/watch -p './src/**' npm run build",
},
"devDependencies": {
"connect": "^3.6.2",
"livereload": "^0.6.2",
"serve-static": "^1.12.3",
"watch-run": "^1.2.5"
}
$ npm run watch 构建项目并启动 livereload + 静态文件服务器。 （为简洁起见，省略了 build:* 任务）。
【讨论】：
使用名为 livereload 的 npm 包。
将它与nodemon 结合使用，这样客户端和服务器端都可以完美运行。
npm install livereload nodemon --save
--保存开发。我知道，我知道！
添加浏览器扩展。适用于 Safari、Firefox 和 Google Chrome。 让他们here。
确保在 package.json 中包含此脚本。
"scripts": {
"start": "nodemon server.js && livereload"
}
server.js 是我的入口点。
在server.js 内添加以下内容：
const livereload = require('livereload');
const reload = livereload.createServer();
reload.watch(__dirname + "/server.js");
server.js 是我希望 livereload 观看的文件。您也可以添加任何目录而不是文件。
reload.watch(__dirname + "/public");
在终端：
npm start
点击浏览器中的扩展图标进行连接。
你也可以在不同的终端分别使用livereload和nodemon。
"scripts": {
"start": "nodemon server.js",
"livereload": "livereload"
}
npm start
npm livereload
npm livereload -p PORT_NUMBER如果默认是端口已经使用了。
更新：有时它无法保存一次。再次重新加载几个 Ctrl+S 并进行更改。不知道是浏览器缓存问题还是包问题。
【讨论】：
如果使用grunt，则有一个npm包grunt-contrib-watch用于实时重新加载。
查看另一个名为 grunt-express-server 的可以一起工作的。
【讨论】：
您可以使用nodemon。
它会监视您的项目文件并在您更改它们时重新启动服务器。
你可以全局安装：
npm install -g nodemon
在你的项目目录中运行它
cd ./my-project
nodemon
您还可以将其添加到项目的开发依赖项中并从 npm 脚本中使用它：
npm install --save-dev nodemon
然后添加一个简单的脚本到你的package.json:
"scripts": {
"start": "node server.js",
"dev": "nodemon"
}
那么您可以简单地运行以下命令：
npm run dev
【讨论】：