如何将live-reload添加到我的nodejs服务器

Question

这是我如何运行我的服务器nodejs,当我对前端dev中的代码进行更改时,我需要liverealord我的服务器

"start": "node server.js"

Answer 1

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

• 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 刷新浏览器的前端和后端更改”中阅读更长的说明。

Answer 2

第一：

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 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

重新启动服务器是一回事，刷新浏览器是另一回事。对于服务器观看，我使用nodemon。Nodemon可以查看任何类型的文件何时发生更改。但是nodemon无法刷新浏览器页面。为此，我使用浏览器同步。

我都用了。

因此，请使用package.json的依赖项使其起作用：

"devDependencies": {
"browser-sync": "^2.24.5",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}

在服务器文件中（我的服务器在./bin/www中，您的服务器可以在server.js，app.js或其他位置），快速服务器侦听端口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时，它将开始监视服务器以及在任何文件更改时刷新浏览器。

尽管我们在快递服务器中指定了端口3001，但我们在浏览器同步中编写的应用仍将在端口3002上运行。3001将用作代理。