express.js + stylus: 自动 Stylus 编译不起作用

Question

我正在使用express.js 3.4.0和stylus 0.37.0。我试图让express和stylus一起工作，这样当我请求一个实际上是在其他地方的stylus文件的css文件时，express会触发stylus编译它，然后提供服务(我想这是相当标准的，因为我在很多教程中都看到过)。

我的文件结构:

myApp
  resources
    stylus
      style.styl
  public
    css

我的app.js代码（只包含相关内容）：

app.use("/static", express.static(__dirname + "/public"));
app.use(stylus.middleware({
    src: __dirname + "/resources/stylus",
    dest: __dirname + "/public/css",
    debug: true,
    force: true,
}));

据我所了解，请求/static/css/style.css应该会导致express从resources/stylus/style.styl生成此文件并提供服务。但事实并非如此。只有当我请求/style.css时，/public/css/style.css文件才能正确生成，但是我仍然得到404错误。随后，由于现在物理存在，我可以通过/static/css/style.css来请求它。

请问有人能建议一些步骤来解决这个问题吗？我是否遗漏了什么？

- Sgoettschkes

Answer 1

为了使编译工作正常，您提供服务的目录必须在源目录中也存在。由于 style.styl 在源文件的根目录中，因此对于 GET 请求来说它也在根目录中。在资源中，将 stylus 重命名为 css，并将配置更改为以下内容：

app.use(stylus.middleware({
  src: __dirname + '/resources',
  dest: __dirname + '/public',
  debug: true,
  force: true
}));

现在当你执行 GET /css/style.css 时，它将会编译样式表。从图形上来看，编译的结构如下所示：

/resources/style.styl       -->   /public/style.css
/resources/css/style.styl   -->   /public/css/style.css

然后，另一个问题出现了。您想使用/static来服务于/public。

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

你需要将那行改为：

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

解决方法是按照以下方式构建您的应用程序:

myApp
├─┬ public
│ └─┬ static
│   └── css
└─┬ resources
  └─┬ static
    └─┬ css
      └── style.styl

现在，当您发出GET /static/css/style.css请求时，样式表将从位置/resources/static/css/style.styl编译。

因此，假设有以上所示的文件树和此代码：

var express = require('express');
var stylus = require('stylus');
var app = express();

app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
  src: __dirname + '/resources/',
  dest: __dirname + '/public/',
  debug: true,
  force: true,
}));

第一次加载时，/static/css/style.css会显示404错误，但第二次加载时，样式表将会存在。

- hexacyanide

---

我也遇到了同样的问题，但只有在将我的节点应用程序复制到 Windows 后才出现。在 Linux 上，由于某种原因，它可以正常工作。感谢详细的解释。 - Simon A. Eugster

这是一个非常奇怪的系统。我本来以为设置 src: 'assets/css' 会编译 assets/css/xyz.css，但实际上它需要设置为 src: 'assets' 并自动解析为 /css。太疯狂了。 - Matt Fletcher

我认为这是一个 bug。 我已经提交了一个 PR，使中间件在 Windows 上按照您的想法工作。 炫酷的解决方法！https://github.com/stylus/stylus/pull/2029 - Bret

Answer 2

基于hexacyanide的答案，我添加了path.join以确保它在任何操作系统上都能正常工作（例如，在Windows上有时如果不使用正确的路径分隔符，则无法正常工作）。

代码最终看起来像这样：

var express = require('express');
var stylus = require('stylus');
var path = require('path');
var app = express();

app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
  src: path.join(__dirname, 'resources'),
  dest: path.join(__dirname, 'public'),
  debug: true,
  force: true,
}));

根据操作系统，path模块应该添加正确的路径分隔符（'/'或'\'）。

- Cedrik Dubois