0

エクスプレスアプリの新規インストールを行いました。と私

パッケージ.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 でウェルカム テキストを変更すると、クロムがリロードされません。更新すると、変更が表示されます。

フォルダーの変更時にページを自動リロードするにはどうすればよいですか。

注: nodemon は正常に動作していますが、ブラウザをリロードしません。

4

2 に答える 2

2

Reload プラグインは、Express サーバーが nodemon によって再起動された場合にのみ、ページをリロードします。ドキュメントから：

サーバーを再起動すると、クライアントはサーバーの再起動を検出し、ページを自動的に更新します。

Nodemonは Pug templates を監視しないため、テンプレートの変更時に再起動されません。

デフォルトでは、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 に答える