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

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文件和文件应该是相似的.如果链接到csshtml中的文件看起来像

<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) { ... }
  }));
  ...
});

我在源头看到的.

Stylus会解析所有请求,并仅选择那些请求的css文件.然后它将cssurl的路径名与您的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();
  }
}