节点 - 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的原因是因为当你访问你的应用程序，快速重定向所有以“路线”，它指向您的顶级目录：

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最后或作为后续任务，请用您的适当吞咽任务替换bs.reload。

最后，您还应该使用express-generator安装并创建一个测试项目，这将在项目和代码结构方面帮助您很多。请享用！