Question

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

unsigned int

此应用使用Express作为中间件。我访问http://localhost:3000时可以成功加载应用。我现在正在尝试整合LiveReload。

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

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

这里的重要部分是当一些CSS被更改时，我需要重建CSS以便将它全部放入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); }。我的index.html文件参考site.css。我的server.js文件如下所示：

site.css

如果我使用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;从命令行手动启动应用，我可以成功访问＆＃34; http://localhost:3000＆＃34;。但是，如果我运行node dist/server.js，然后访问＆＃34; http://localhost:3000＆＃34;，我会得到一个＆＃34; ERR_CONNECTION_REFUSED＆＃34;，这是有道理的，因为我试图尝试使用live-reload。不过，如果我访问＆＃34; http://localhost:35729/＆＃34;，我只看到以下内容：

gulp

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

Answer 1

您收到ERR_CONNECTION_REFUSED的原因是因为当您访问自己的应用时，Express会将所有流量重定向到指向您首要目录的路线＆＃39;

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安装和创建测试项目，这将对项目和代码结构有很大帮助。享受！

节点 - LiveReload功能

1 个答案: