节点 - LiveReload 功能

Question

我正在学习 Node.js。为了学习，我正在尝试建立一个基本的网站。为了做到这一点，我有一个如下所示的目录结构：

./
  dist/
  node_modules/
  src/
    res/
      css/
        core.css
        theme.css
    routes/
      index.js
    views/
      home/
        index.html
    server.js
  gulpfile.js
  package.json

这个应用程序使用 Express 作为中间件。我访问http://localhost:3000时可以成功加载应用程序。我现在正在尝试集成 LiveReload。

对于某些背景，我的 gulpfile.js 文件如下所示：

var gulp = require('gulp');
var css = require('gulp-cssnano');
var concat = require('gulp-concat');
var livereload = require('gulp-livereload');

var input = {
    js : [],
    css: [ 
        'src/res/css/core.css',
        'src/res/css/theme.css'
    ],
    html: [ 'src/**/*.html' ]
};

gulp.task('default', gulp.series(clean, buildCss, buildHtml, watch));

function buildCss() {
    return gulp
        .src(input.css)
        .pipe(concat('site.css'))
        .pipe(css())
        .pipe(gulp.dest('dist/res/css'))
    ;        
}

function buildHtml() {
    return gulp
        .src(input.html)
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
    ;
}

function reload() {
    livereload.reload();
}

function watch() {
    livereload.listen();
    gulp.watch([ input.css, input.js, input.html ], reload);
}

这里的重要部分是，当某些 CSS 发生更改时，我需要重新构建 CSS，以便将其全部放入 site.css。我的 index.html 文件参考 site.css。我的 server.js 文件如下所示：

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

// setup the middleware
var express = require('express');
var app = express();
app.set('port', process.env.PORT || 3000);

// setup livereload
var livereload = require('express-livereload');
livereload(app, config={});

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

app.use(favicon(__dirname + '/res/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/res', express.static(path.join(__dirname, 'res')));

// setup the routing
var routes = require('./routes');
app.use('/', routes);

// 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 handlers
app.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

var server = require('http').createServer(app);
server.listen(app.get('port'), function() {
    console.log('Server listening on port ' + app.get('port'));    
});
module.exports = app;

如果我使用node dist/server.js 从命令行手动启动应用程序，我可以成功访问“http://localhost:3000”。但是，如果我运行gulp 然后访问“http://localhost:3000”，我会得到一个“ERR_CONNECTION_REFUSED”，这是有道理的，因为我正在尝试使用实时重载。不过，如果我访问“http://localhost:35729/”，我只会看到以下内容：

{
  minilr: "Welcome",
  version: "0.1.8"
}

我不明白。我不明白为什么我会看到这个 JSON（或者它甚至来自哪里）。我期待得到我的 index.html 文件。任何帮助解决此问题将不胜感激。

Answer 1

您收到ERR_CONNECTION_REFUSED 的原因是，当您访问您的应用程序时，Express 会将所有流量重定向到指向您的顶级目录的“路由”：

var routes = require('./routes');
app.use('/', routes)

您需要将其更改为：

var routes = require('./routes/index');
app.use('/', routes)

在您的 ./routes/index.js 文件中，有类似的内容：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('home/index');
});
module.exports = router;

顺便说一句，我会切换到浏览器同步，这将使整个过程更容易：

Gulpfile.js

var gulp = require('gulp');
var bs = require('browser-sync').create();

// our browser-sync config + nodemon chain
gulp.task('browser-sync', function() {
    bs.init(null, {
        proxy: "http://localhost:3000",
        browser: "chromium-browser",
        port: 4000,
    });
});

// the real action
gulp.task('default', ['browser-sync'], function () {
    gulp.watch('./views/**/*.html', bs.reload);
    gulp.watch('./src/**/*.js', bs.reload);
    gulp.watch('./src/**/*.css', bs.reload);
});

之前别忘了npm install --save browser-sync！

如果您需要一些预处理/后处理，请将 bs.reload 替换为适当的 gulp 任务，同时始终在末尾或作为后续任务包含 bs.reload。

最后，您还应该使用express-generator 安装和创建一个测试项目，这将对项目和代码结构有很大帮助。尽情享受吧！