我正在尝试设置Stylus中间件,但没有成功。 documentation不适合初学者或Nodejs的新手。我猜测我需要创建一个使用手写笔中间件的小型迷你节点应用程序。但是,即使在该页面上设置了简单,我也无法使其工作。这就是我所做的:
当然,我已经安装了节点以及手写笔。然后我创建了一个文件stylus-middleware.app。到目前为止,我已经添加了以下代码(基于文档中最简单的示例):
var app = connect();
app.middleware(__dirname);
当我尝试运行简单的应用程序时,出现以下错误:
Tue Feb 19:~/Sites/test $ node stylus.app
/Library/WebServer/Documents/test/stylus.app:1
ction (exports, require, module, __filename, __dirname) { var app = connect();
^
ReferenceError: connect is not defined
at Object.<anonymous> (/Library/WebServer/Documents/test/stylus.app:1:73)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.runMain (module.js:492:10)
at process.startup.processNextTick.process._tickCallback (node.js:244:9)
我进行了网络搜索,发现connect()是一个与nodejs的connect插件相关的函数,所以我尝试安装它,但我得到的错误是一样的。所以我很难过......我对nodejs的工作原理还不了解,知道这里发生了什么。
任何建议都将不胜感激!
经过一番捣乱,我已经了解了如何设置手写笔中间件并将其链接到连接服务器。但是,我的代码仍然无效。我没有收到任何错误,但是手写笔没有编译位于应用程序目录中的.styl文件(即在__dirname中)。这是现在的应用程序代码:
function compile(str, path) {
return stylus(str)
.import(__dirname)
.set('filename', path)
.set('warn', true)
.set('compress', true);
}
var stylus = require('stylus');
var connect = require('connect');
var app = connect();
app.use(stylus.middleware({
src: __dirname,
dest: __dirname,
compile: compile
}));
app.use(connect.static(__dirname));
var server = require('http').createServer(app).listen(8000);
console.log('Watching .styl files in directory: '+__dirname);
如果有人知道这里缺少什么或有什么建议,我很乐意听到一些想法......
答案 0 :(得分:1)
您需要在命令行上安装connect,然后将其放入您的代码中:
npm install connect
然后像这样要求
var connect = require('connect),
app = connect();
答案 1 :(得分:1)
这是一个适合我的最小应用程序。不过,它使用Express
代替Connect
。
首先安装Express和Stylus:
npm install express
npm install stylus
接下来,创建服务器代码(app.js
或您想要的任何文件名):
var express = require('express');
var stylus = require('stylus');
var app = express();
app.use(stylus.middleware({
src : __dirname + '/node/www',
dest : __dirname + '/node/nginx',
compile : function(str, path) {
return stylus(str)
.set('filename', path)
.set('warn', true)
.set('compress', true);
}
}));
app.use(express.static(__dirname + '/node/nginx'));
app.listen(3000);
创建一个简单的Stylus样式表(称之为./node/www/app.styl
):
body
background #123
启动服务器:
node app.js
执行CSS文件请求:
curl http://localhost:3000/app.css
在该请求之后,请查看./node/nginx
以查看它是否包含(生成的)app.css
。
编辑:刚刚意识到这可能只能解决部分问题。
如果您的目的是使用nginx提供生成的CSS文件,那么它无法正常工作。原因是Stylus中间件拦截了对.css
文件的请求,以查看a)是否有附带的.styl
文件,b)是否需要编译.styl
文件。如果nginx捕获了所有CSS文件请求,那么请求将永远不会被Stylus中间件处理。
答案 2 :(得分:1)
您可能需要安装文件检查器,以检测何时更改文件并自动重新编译.styl文件
最受欢迎的两个是nodemon和npm-supervisor。
作为测试,您可以删除.CSS文件,并在启动应用程序时查看.styl文件是否编译为.CSS。