0

我重新安装了 express 应用程序。和我的

包.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"
  }
}

应用程序.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 工作正常。再次它不会重新加载浏览器。

4

2 回答 2

2

仅当快速服务器由 nodemon 重新启动时，重新加载插件才会重新加载页面。从文档：

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

Nodemon不监视 Pug 模板，因此它不会在模板更改时重新启动：

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

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

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

doctype html
  html
  head
    ...
  body
    block content
    script(src='/reload/reload.js')
于 2018-08-25T13:28:41.673 回答
0

为此，您需要 installLivereload与Nodemon. 一个简单的 Express APP 进行必要的更改，它会是这样的：

完成一步一步解释

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;
于 2021-06-29T15:24:52.660 回答