Узел - возможности 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. My 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 вашими соответствующими задачами gulp, если вам нужна предварительная обработка, всегда включающая bs.reload в конце или в качестве следующей задачи.

Наконец, вы также должны установить и создать тестовый проект, используя express-generator, который поможет вам многое в отношении структуры проекта и кода. Наслаждайтесь!