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分隔符('/'或'\')。