节点 – LiveReloadfunction
我正在学习Node.js 我正在努力为了学习而build立一个基本的网站。 为了做到这一点，我有一个目录结构如下所示：
./ dist/ node_modules/ src/ res/ css/ core.css theme.css routes/ index.js views/ home/ index.html server.js gulpfile.js package.json 这个应用程序使用快递中间件。 当我访问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被改变时，我需要重buildCSS，以便它们被放到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文件。 任何帮助解决这个问题将不胜感激。
您收到ERR_CONNECTION_REFUSED的原因是因为当您访问您的应用程序时，Express会将所有stream量redirect到路由，该路由指向您的顶层目录：
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.reloadreplace为适当的bs.reload任务，同时始终包含bs.reload或作为后续任务。
最后，您还应该使用快速生成器来安装和创build一个testing项目，这将有助于您在项目和代码结构方面进行大量的工作。 请享用！