将 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 文件的路径应该是相似的。如果链接到 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 url 的路径名与您的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();
  }
}