stylus - 中间件不编译 `styl` 文件

Question

我将

stylus

与中间件集成。但根本没有调用

compile

函数..

1) 如何使

compile

方法发挥作用

2) 每次更新'tcp.styl`文件时如何更新'tcp.css'修改

这是我的代码：

var connect = require('connect'),
    serveStatic = require('serve-static'),
    stylus = require('stylus');

var app = connect();

app.use(stylus.middleware({
    src     : __dirname + '/app/css', //inside i have tcp.styl
    dest    : __dirname + '/app/css', //i require tcp.css
    force   : true,
    compile : function(str, path) {
        console.log('compiled'); //not called at all..
      return stylus(str, path)
        .set('filename', path) //file name i need to update as 'tcp.css'?
        .set('warn', true)
        .set('compress', true);
    }
}));

app.use(serveStatic("app"));
app.listen(5000, function () {console.log("HI", __dirname);}); //works!

文件结构：

Answer 1

我查看了您的应用程序结构。与您的配置不匹配。您的文件位于

./public/stylus/tcp.styl

，但需要与您的

src

手写笔配置选项相匹配。使用以下结构进行设置：

• 将您的手写笔代码移至

  ./public/css/tcp.styl

  • 将 .styl 和 .css 文件放在一起可以简化事情。
• 手写笔中间件选项：

  src: __dirname + '/public'

  • 删除手写笔中间件

    dest

    。它将默认与

    src

    相同，一切都会变得更简单。
• 要加载的 URI

  /css/tcp.css

• 编译后的 css 将在

  ./public/css/tcp.css

  中结束，在 stylus 中间件编译后由静态中间件提供服务。

Answer 2

我有一个例子，但在表达中，这将满足你的要求。

根目录“app”及其文件

 app.js   index.jade  public

public/stylesheets 包含一个 .styl 文件

 public/stylesheets/tcp.styl

index.jade 正在与已编译的 .css 连接

link(rel="stylesheet", href="/stylesheets/tcp.css")

在index.jade中添加一段并在tcp.styl中设置其样式，当您运行服务器时，您将获得从tcp.styl -> tcp.css自动编译的文件。 stylesheets 文件夹将包含两个文件

tcp.styl  tcp.css

希望有帮助。

App.js 文件看起来像这样

var express = require('express'),
    nib = require('nib'),
    stylus = require('stylus');

var app = express();

app.set('view engine', 'jade')
app.use(stylus.middleware({
    src: __dirname + '/public',
    compile: function compile(str, path) {
       return stylus(str)
       .set('filename', path)
       .use(nib())
    }
}));

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
  res.render('../index');
});

app.listen(3000);
console.log('Server listening on port 3000');