節點 - 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安裝並創建一個測試項目，這將在項目和代碼結構方面幫助您很多。請享用！