节点- 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"，这是有意义的，因为我正在尝试使用live。不过，如果我访问"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。

最后，您还应该使用特快发生器安装和创建一个测试项目，这将对您在项目和代码结构方面有很大帮助。享受吧！