如何将实时重新加载添加到我的 nodejs 服务器

Question

这是我如何运行我的服务器 nodejs。 当我对前端开发中的代码进行更改时，我需要实时重新加载我的服务器

"start": "node server.js"

Answer 1

首先：

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

有关更多详细信息，请参阅https://github.com/napcs/node-livereload

Answer 2

重启服务器是一回事，刷新浏览器是另一回事。 对于服务器观看，我使用 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 上工作，正如我们在浏览器同步中所写的那样。 3001 将用作代理。

Answer 3

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

Answer 4

我的设置中的一个示例：

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 上启动了两个服务器：livereload 服务器侦听:35729和静态文件服务器:3033 。

Livereload 观察包含编译文件（js、css、html）的dist目录。 您需要将此代码段添加到应该重新加载的每个 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:*任务）。

Answer 5

您可以使用“livereload”、“connect-livereload”和“nodemon”包将前端和后端更改实时重新加载到浏览器。 这样你就不需要 Gulp。 以下是这些包的组合方式：

• livereload打开一个高端口并通知浏览器更改的公共文件
• connect-livereload猴子使用连接到此高端口的代码段修补每个服务的 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 刷新浏览器的前端和后端更改”中阅读更长的解释。

Answer 6

使用名为livereload的 npm 包。

将它与nodemon结合使用，这样客户端和服务器端都可以完美地工作。

npm install livereload nodemon --save

--保存开发。 我知道，我知道！

添加浏览器扩展。 适用于 Safari、Firefox 和 Google Chrome。 把它们弄到这里。

确保在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 重新加载并进行更改。 我不知道这是浏览器缓存问题还是包问题。

Answer 7

如果使用grunt ，有一个 npm 包grunt-contrib-watch用于实时重新加载。

查看另一个可以协同工作的名为grunt-express-server 。

Answer 8

您可以使用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