手写笔 - 中间件不编译`styl`文件

Question

我将stylus与中间件集成在一起。但是根本没有调用compile函数..

1）如何使compile方法起作用

2）如何更新＆＃t; ccp.css＆＃39;每次我更新＆＃t; tcp.styl`文件修改

这是我的代码：

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

我看了你的app结构。它与您的配置不匹配。您的文件位于./public/stylus/tcp.styl，但需要与src手写笔配置选项相匹配。使用以下结构进行设置：

• 将您的手写笔代码移至./public/css/tcp.styl
  • 将.styl和.css文件保持在一起可以简化事情。
• 手写笔中间件选项：src: __dirname + '/public'
  • 删除手写笔中间件dest。它默认与src相同，一切都会更简单。
• 要加载/css/tcp.css
的URI
• 编译后的css将以./public/css/tcp.css结尾，在手写笔中间件编译后由静态中间件提供服务。

Answer 2

我有一个例子，但在快递方面，那就是你要做的事情。

根目录＆＃39; app＆＃39;和它的文件

 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自动编译文件 - ＆gt; tcp.css。而stylesheets文件夹将包含两个文件

tcp.styl  tcp.css

希望它有所帮助。

App.js文件看起来像那样

＆＃13;

＆＃13;

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');

＆＃13;

＆＃13;

＆＃13;