Stylus 仅在加载索引页面时重新编译 .styl 文件答案

【问题标题】：Stylus only recompiles .styl files on index page loadStylus 仅在加载索引页面时重新编译 .styl 文件
【发布时间】：2012-11-02 14:07:22
【问题描述】：

我最初在尝试设置 Stylus 时非常沮丧，因为我会调整我的 src 和 dest 设置，重新启动 Node，刷新，但 Stylus 没有编译。这是在像http://localhost:3000/tasks 这样的页面上。但是，src 和 dest 路径是正确的，当我重新启动 Node 并尝试加载索引页面时，http://localhost:3000，Stylus 将正确编译。

所以现在我发现它可以正确编译，但只能从主 URL 编译，我想知道我是否设置了错误，因为在我刷新之前对 .styl 文件的任何更改都不会更新主页，而不是任何 GET 参数页面。

var express = require('express');
var app = express();
var stylus = require('stylus');

app.configure(function () {
    this.set("views", __dirname + "/views/jade");
    this.set("view engine", "jade");
    this.use(express.bodyParser());
    this.use(express.methodOverride());
    this.use(this.router);

    this.use(stylus.middleware({
        src: __dirname + '/views/styl', //styl files to be compiled
        dest: __dirname + '/public/css', //destination for compiled css
        compress: true
    }));

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

我描述的是正常过程吗，或者如果 Stylus 注意到 .styl 文件中的更改，无论您的 URL 是什么，Stylus 都应该重新编译吗？

【问题讨论】：

另外，如果我的问题难以理解，如果有人可以告诉我，我会重新声明。这令人难以置信的沮丧......突然我的 Stylus 文件根本无法编译，而且我没有更改任何代码。
FWIW，我根本不认识这个。

标签： node.js express stylus

【解决方案1】：

我最终选择了默认的 Stylus 路径，这意味着在我的“views”和“public”目录中都使用了一个名为“stylesheets”的目录，以及以下代码：

    //Stylus
    this.use(stylus.middleware({
        src: __dirname + '/views', //styl files to be compiled
        dest: __dirname + '/public', //destination for compiled css
        compress: true
    }));

Stylus 然后在 /views/stylesheets 中查找 .styl 文件，并将它们编译到 /public/stylesheets。出于某种原因，试图更改目录的名称并喜欢我的路径给我带来了麻烦。从阅读一些论坛来看，目前这似乎不被认为是一个错误，但确实存在。

【讨论】：

【解决方案2】：

我没有 50 的声誉可以发表评论，但您可以根据需要更改路径。首先需要path 模块：

path = require('path')

然后根据你的口味解决：

path.resolve('./') //this will be resolved to where your node app resides
path.resolve('../') //this will go one directory up from the path of your node app file
path.resolve('../../')  //this will go two directories up from the path of your node app file

使用console.log() 来查看这些产品产生了什么。然后对于手写笔中的选项，只需将其更改为解析路径，而不是使用__dirname 作为基础。所以假设你有一个目录结构：

$userPath/myApp/frontend/src/app.js
$userPath/myApp/frontend/src/public
$userPath/myApp/frontend/static/public

然后你可以：

var staticPath = path.resolve('../') + '/static'; //$userPath/myApp/frontend/static

app.use(
  stylus.middleware({
    src:  __dirname + '/public/',
    dest: staticPath + '/public/',
    debug: true,
    compile : function(str, path) {
      return stylus(str)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }
  })
);

【讨论】：