Question

我做了全新的快递应用程序。而我的

的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中更改文本welcome时，不会重新加载chrome。如果我刷新，我可以看到变化。

如何在任何文件夹中更改自动重新加载页面。

注意：nodemon工作正常。但是它没有重新加载浏览器。

Answer 1

Reaload插件仅在nodemon重新启动Express服务器时才重新加载页面。来自the docs：

重新启动服务器时，客户端将检测到正在重新启动的服务器并自动刷新页面。

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

默认情况下，nodemon查找扩展名为.js，.mjs，.coffee，.litcoffee和.json的文件。

您可以设置.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并重新加载不重新加载浏览器

2 个答案: