express.js +手写笔:自动手写笔编译不起作用

我运行express.js 3.4.0与手写笔0.37.0我试图让expression和手写笔一起工作,所以当我要求一个实际上是手写笔文件在其他地方的一个CSS文件,expression触发器手写笔来编译它,然后服务它(相当标准,我猜,因为我看到它在许多教程中工作)。

我的文件结构:

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应该导致从resources/stylus/style.styl表示生成这个文件,然后提供。 这不起作用。 如果我请求文件/style.css文件/public/css/style.css是正确生成的,但是我仍然得到一个404。 之后,我可以通过/static/css/style.css来请求它,因为它现在已经存在。

有人可以build议任何步骤来解决这个问题吗? 我错过了什么吗?

为了编译工作,您所服务的目录也必须存在于源目录中。 由于style.styl位于源代码的根目录中,因此它也位于GET请求的根目录中。 在资源中,将stylus重命名为css ,并将您的configuration更改为如下所示:

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

现在当你GET /css/style.css ,它会编译样式表。 从graphics上来看,这就是编译的结构:

 /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')); 

解决这个问题的方法是像这样构build你的应用程序:

 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的答案 ,我添加了path.join以确保它可以在任何操作系统上工作(例如,在windows上有时在不使用正确的path分离器时不起作用)。

代码最终看起来像这样:

 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模块应该根据os添加正确的path分隔符('/'或'\')。