设置Stylus Middleware w/ Node和Connect时出现问题

rnmwe5a2  于 2023-06-05  发布在  Node.js
关注(0)|答案(3)|浏览(380)

我正在尝试设置Stylus中间件,但没有成功。documentation不适合初学者或Node.js新手。我推测的是,我需要创建一个小的迷你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()是一个与node.js的Connect插件相关的函数,所以我试图安装它,但我得到的错误是一样的。所以我被难住了。我对node.js的工作原理还不太了解,不知道这里发生了什么。
任何建议将不胜感激!

更新

经过一番折腾,我已经明白了如何设置触控笔中间件并将其链接到Connect服务器。但是,我的代码仍然不工作。我没有得到任何错误,但手写笔没有编译位于应用程序目录中的.styl文件(即。in __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);

如果有人知道这里缺少了什么,或者有一些建议,我很乐意听到一些想法。

ccrfmcuu

ccrfmcuu1#

你需要在命令行上安装connect,然后在代码中要求它:

npm install connect

然后像这样要求它

var connect = require('connect),
    app = connect();
tyky79it

tyky79it2#

这里有一个最小的应用程序,对我来说很好。它使用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中间件处理。

kx7yvsdv

kx7yvsdv3#

您可能需要安装一个文件检查器,它可以检测您对文件所做的更改并自动重新编译.styl文件
最流行的两个是nodemon和npm-supervisor。
作为测试,您可以删除.CSS文件,并在启动应用程序时查看.styl文件是否编译为.CSS。

相关问题