0

我正在尝试设置 Stylus 中间件，但没有成功。该文档不适合初学者或 Nodejs 新手。我猜想我需要创建一个使用手写笔中间件的小型迷你 Node 应用程序。但是，即使在该页面上设置了简单的设置，我也无法使其正常工作。这是我所做的：

当然，我已经安装了节点和手写笔。然后我创建了一个文件 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的连接插件相关的函数，所以我尝试安装它，但我得到的错误是一样的。所以我很难过......我对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);

如果有人知道这里缺少什么或有一些建议，我很想听听一些想法......

4

3 回答 3

1

您将需要在命令行上安装连接，然后将其要求到您的代码中：

npm install connect

然后像这样要求它

var connect = require('connect),
    app = connect();
于 2013-02-19T10:47:18.270 回答
1

您可能需要安装一个文件检查器来检测您何时对文件进行更改并自动重新编译您的 .styl 文件

最受欢迎的两个是 nodemon 和 npm-supervisor。

作为测试，您可以删除您的 .CSS 文件，并在启动应用程序时查看 .styl 文件是否编译为 .CSS。

于 2014-08-19T12:31:23.597 回答
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 中间件处理。

于 2013-03-02T08:09:59.760 回答