路由在使用 Jade 生成静态 html 文件的快速应用程序中不起作用

Question

您好，我正在尝试创建我的第一个节点应用程序/环境。

应用结构

MyApp/
-node_modules/
-public/
--images/
--javascript/
--scss/
-routes/
-source/
--images/
--javascript/
--scss/
-views/
-gulp.js
-app.js
-package.json

我在运行我的应用程序中使用以下内容：

使用节点 gulp 作为任务管理器（sass、jshint、jade 到 html）玉为模板快递（服务器和路由）

也许值得一提的是，我正在使用 gulp 从我的 jade 模板生成 html 文件。

我的问题是路由，我无法使路由工作，我运行 gulp 处理我的所有任务并启动节点 app.js 启动服务器。

这是我的 gulp.js

代码

/* file: gulpfile.js */

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    express = require('express'),
    jshint = require('gulp-jshint'),
    sass   = require('gulp-sass'),
    plumber = require('gulp-plumber'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    jade = require('gulp-jade');


// Server and live reload ==========================

gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')({port: 35729}));
  app.use(express.static(__dirname));
  app.listen(4000, '0.0.0.0');
});

var tinylr;
gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
    tinylr.listen(35729);
});

function notifyLiveReload(event) {
  var fileName = require('path').relative(__dirname, event.path);

  tinylr.changed({
    body: {
      files: [fileName]
    }
  });
}


// Task templates jade =============================

gulp.task('html', function() {
    return gulp.src('views/*.jade')
        .pipe(jade({
             pretty: true
        })) // pip to jade plugin
        .pipe(gulp.dest('public/')); // tell gulp our output folder
});


// SASS and Minify ==================================

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};


gulp.task('styles', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(plumber({
      errorHandler: onError
    }))
    .pipe(sourcemaps.init())  // Process the original sources
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(autoprefixer(
        {
            browsers: [
                '> 1%',
                'last 2 versions',
                'firefox >= 4',
                'safari 7',
                'safari 8',
                'IE 8',
                'IE 9',
                'IE 10',
                'IE 11'
            ],
            cascade: false
        }
    ))
    .pipe(gulp.dest('./public/styles/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('public/styles/'));
});



// Javascript concat and uglify ============================= 

gulp.task('build-js', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
    .pipe(sourcemaps.init())
      .pipe(concat('main.js'))
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/javascript'));
});

//  Images Taks optimization ================================

gulp.task('images', function(){
  return gulp.src('source/images/**/*.+(png|jpg|gif|svg)')
  .pipe(cache(imagemin({
      interlaced: true
    })))
  .pipe(gulp.dest('public/images'))
});


// Watch task ==================================================

gulp.task('watch', function() {
  gulp.watch('source/scss/*.scss', ['styles']);
  gulp.watch('source/javascript/**/*.js', ['build-js']);
  gulp.watch('./views/**/*.jade', ['html']);
  gulp.watch('./public/*.html', notifyLiveReload);
  gulp.watch('./views/**/*.jade',  notifyLiveReload);
  gulp.watch('./public/styles/*.css', notifyLiveReload);
});

gulp.task('default', ['html', 'styles', 'express', 'build-js', 'livereload', 'watch'], function() {

});

这是我的 app.js

// BASE SETUP ===============================================

'use strict';

var express = require('express');
var app = express();
// var routes = require('./routes/index');

// CONFIGURATION ============================================

app.set('views', __dirname + '/views');
//app.engine('jade', require('jade').__express)
app.set('view engine', 'jade');

app.use(express.static(__dirname + '/public'))

// app.use('/', routes);


// CREATE SERVER ============================================

app.listen(3000, function(){
    console.log('App started in port 3000');
});

module.exports = app;

Answer 1

如果您打算在 express 中使用 jade 作为视图引擎，您可以取消对 jade 文件的 gulp 编译。这是不必要的步骤。

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

这些行告诉 express 在路由器内调用 render() 时使用 jade。当你设置你的路由时，无论它们是 root app.get('/', function(req, res){}) 还是其他 - 只需调用 res.render('viewname') 让 express 从那里接管。它将在请求触发时调用 jade 编译器并 return html 输出。这允许您插入一个 object 作为渲染的第二个参数并传入动态数据。

此处为突破示例：

假设你设置了 app.set('views', __dirname + '/views'); 这告诉 express 在你调用 render('home') 时查看 /views 目录中的 jade 文件。您不需要指定 '/views/home.jade' 或类似的内容。如果您在 /views 中有嵌套文件夹，它将成为您的根目录，因此调用 render('/subfolder/nested') 将起作用。

/views
- home.jade
- secondary.jade
  /subfolder
  - nested.jade

上述视图的示例路线

app.get('/', function(req, res){
  //do some sort of preprocessing here if you want
  res.render('home');
})

app.post('/secondary', function(req, res){
  //do some sort of preprocessing here if you want
  res.render('secondary', {somedata: 'this is data'});
})

注意 render 的第二个参数是 object。在 secondary.jade 中，您现在可以访问一些数据作为变量。例如，您可以将标题设置为 somedata

doctype html
html
  head
    title=somedata
  body

标题会变成'this is data'

希望这对您有所帮助。

路由在使用 Jade 生成静态 html 文件的快速应用程序中不起作用

Routes not working in an express app using Jade to generate static html files

node.js

express

gulp

pug