Question

我有我的项目，并将一些代码从express2.5.7移植到express3.0.3。我认为它几乎是1：1的转移，但我遇到了一个无法将我的手写笔文件编译到我指定的目录中的问题。这是我的基本app.js设置：

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , nib = require('nib')
  , bootstrap = require('bootstrap-stylus')
  , stylus = require('stylus');

var app = module.exports = express();

app.configure('dev', function(){
  var stylusMiddleware = stylus.middleware({
    src: __dirname + '/stylus/', // .styl files are located in `/stylus`
    dest: __dirname + '/public/css/', // .styl resources are compiled `/css/*.css`
    debug: true,
    compile: function(str, path) { // optional, but recommended
      console.log(path);
      return stylus(str)
        .set('filename', path)
        //.set('warn', true)
        .set('compress', true)
        .use(bootstrap())
    }
  });
  app.use(express.logger('dev'));
  app.use(stylusMiddleware);  
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
  app.set('view options', { pretty: true });
});

app.configure('prod', function(){
  app.use(express.errorHandler());
});

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

我已经测试了app.configure的东西，它正在通过正确的方法（'dev'和仅使用函数的配置）

Answer 1

我也尝试设置自定义src和dest，但我不能。为了寻找解决方案，我查看了Stylus源代码。在两个词中，styl和css文件的路径应该相似。如果链接到html中的css文件看起来像

<link rel="stylesheet" href="css/app.css">

及其物理路径

public/css/app.css

然后您的styl文件应位于

stylus/css/app.styl

和Express配置应该是

app.configure('dev', function () {
  ...
  app.use(stylus.middleware({
    src: __dirname + '/stylus/',
    dest: __dirname + '/public/',
    compile: function(str, path) { ... }
  }));
  ...
});

我在source中看到的内容。

Stylus会解析所有请求，并仅选择请求css个文件的请求。然后，它将css网址的路径名与您的dest选项合并，将css替换为路径名中的styl，并将结果与您的src选项合并：

// Middleware
return function stylus(req, res, next){
  if ('GET' != req.method && 'HEAD' != req.method) return next();
  var path = url.parse(req.url).pathname;
  if (/\.css$/.test(path)) {
    var cssPath = join(dest, path)
      , stylusPath = join(src, path.replace('.css', '.styl'));

    // ...

  } else {
    next();
  }
}

将Stylus文件输出到express3中的自定义目录

1 个答案: