Express Nodemon 并重新加载而不是重新加载浏览器

Question

我全新安装了 Express 应用程序。还有我的

package.json

{
  "name": "projects",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./app.js"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "pug": "2.0.0-beta11",
    "serve-favicon": "~2.4.5"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "connect-browser-sync": "^2.1.0",
    "nodemon": "^1.12.5",
    "reload": "^2.2.2"
  }
}

app.js

var express = require('express');

var http = require('http');
var reload = require('reload');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();


app.set('port', process.env.PORT || 3000);

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


var server = http.createServer(app)

reload(app);
server.listen(app.get('port'), function () {
 console.log('Web server listening on port ' + app.get('port'))
});

module.exports = app;

我不想使用 gulp 如果重新加载能完成我的工作。

当我更改 index.pug 中的欢迎文本时，chrome 不会重新加载。如果我刷新我可以看到变化。

如何在任何文件夹发生变化时自动重新加载我的页面。

注意：nodemon 正在运行 fine.Again 它不会重新加载浏览器。

Answer 1

只有当 express 服务器被 nodemon 重启时，Reaload 插件才会重新加载页面。来自 the docs:

When you restart the server, the client will detect the server being restarted and automatically refresh the page.

Nodemon does not watch Pug templates，因此它不会在模板更改时重新启动：

By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions.

您可以将 .pug 扩展设置为由 nodemon 监控。但我认为这会导致不必要的服务器重启，因为 Pug 模板似乎是在页面请求发生时在运行时评估的。

别忘了通过修改主布局模板将重新加载脚本添加到所有页面：

doctype html
  html
  head
    ...
  body
    block content
    script(src='/reload/reload.js')

Answer 2

为此，您需要安装 Livereload 以与 Nodemon 一起使用。一个简单的Express APP，经过必要的修改，会是这样的：

Complete step by step explained

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var livereload = require("livereload");
var connectLiveReload = require("connect-livereload");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

const liveReloadServer = livereload.createServer();
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

var app = express();

app.use(connectLiveReload());

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "hbs");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

Express Nodemon 并重新加载而不是重新加载浏览器

Express Nodemon and reload not reloading the browser

reload

nodemon

express-4