Question

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

App结构

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

我正在使用以下内容来运行我的应用：

使用Node gulp作为任务管理员（sass，jshint，jade to 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

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

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

这些行告诉express在路由器中调用render()时使用jade。当您设置路线时，无论它们是根app.get('/', function(req, res){})还是其他东西 - 只需致电res.render('viewname')以便快递从那里接管。它将在请求触发时调用jade编译器并返回html输出。这允许您插入一个对象作为render的第二个参数并传入动态数据。

示例突破：

假设您设置app.set('views', __dirname + '/views');，这告诉express在您调用render('home')时查看/ views目录中的jade文件。您无需指定＆＃39; /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'});
})

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

doctype html
html
  head
    title=somedata
  body

标题会显示为＆＃39;这是数据＆＃39;

希望这会有所帮助。

使用Jade生成静态html文件的快速应用程序中无法使用的路由

1 个答案: