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

我整合了stylus与中间件。 但是根本没有compile函数..

1)如何使compile方法工作

2)如何更新'tcp.css'每次我更新'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! 

文件结构: 文件结构图像

我看着你的应用程序结构。 它不符合你的configuration。 你有你的文件在./public/stylus/tcp.styl但需要匹配你的src手写笔configuration选项。 设置这个结构:

  • 将手写代码移动到./public/css/tcp.styl
    • 保持.styl和.css文件相互靠近可以简化事情。
  • 手写笔中间件选项: src: __dirname + '/public'
    • 删除手写笔中间件dest 。 它将默认为一样的src ,一切都会更简单。
  • 加载/css/tcp.css URI
  • 编译后的css将以./public/css/tcp.css结尾,在笔针中间件编译后由静态中间件提供。

我有一个例子,但是明确地说,那会做你所问的。

根目录“应用程序”,它的文件

  app.js index.jade public 

公共/样式表包含一个.styl文件

  public/stylesheets/tcp.styl 

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

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

在index.jade中添加一个段落,并在tcp.styl中设置它的样式,当你运行一个服务器时,你会从tcp.styl – > tcp.css中自动编译你的文件。 样式表文件夹将包含两个文件

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