Css 设置手写笔的自动编译

我已经在mac上安装了node.js/stylus/nib，我可以在命令行上将

.styl

文件手动编译为

.css

。我还知道，当我搜索如何在

.styl

发生变化时设置自动编译时，会不断出现这种

stylus.middleware（）

问题，但是我不知道应该如何实现它（我以前从未使用过node.js）

我应该把代码放在什么文件里

如何启动此代码以使其始终运行

---

我想我在节点端缺少了一些东西，无法进行设置。

好的，我编辑了我的答案，因为您不想创建主页，然后连接资产毫无意义，也无法帮助您。。。但也许这

在该网站的底部，你会看到一段视频，视频的结尾显示了如何通过命令行使用手写笔

---

HTH，很抱歉误解…

如果您将

stylus

安装为一个全局软件包（

npm install stylus-g

），则您的系统上有一个stylus二进制文件

$ stylus -h
  Usage: stylus [options] [command] [< in [> out]]
                [file|dir ...]

  Commands:

    help [<type>:]<prop> Opens help info at MDC for <prop> in
                         your default browser. Optionally
                         searches other resources of <type>:
                         safari opera w3c ms caniuse quirksmode

  Options:

    -i, --interactive       Start interactive REPL
    -u, --use <path>        Utilize the stylus plugin at <path>
    -U, --inline            Utilize image inlining via data uri support
    -w, --watch             Watch file(s) for changes and re-compile
    -o, --out <dir>         Output to <dir> when passing files
    -C, --css <src> [dest]  Convert css input to stylus
    -I, --include <path>    Add <path> to lookup paths
    -c, --compress          Compress css output
    -d, --compare           Display input along with output
    -f, --firebug           Emits debug infos in the generated css that
                            can be used by the FireStylus Firebug plugin
    -l, --line-numbers      Emits comments in the generated css
                            indicating the corresponding stylus line
    --include-css           Include regular css on @import
    -V, --version           Display the version of stylus
    -h, --help              Display help information

$stylus-h
用法：手写笔[选项][命令][out]]
[文件|目录…]
命令：
帮助[：]在MDC中打开帮助信息，以便在
您的默认浏览器。选择性地
搜索以下内容的其他资源：
safari opera w3c ms Canius quirksmode
选项：
-i、 --交互式启动交互式应答
-u、 --在以下位置使用手写笔插件：
-U、 --通过数据uri支持内联使用图像内联
-w、 --监视文件的更改并重新编译
-o、 --传递文件时输出到
-C、 --css[dest]将css输入转换为手写笔
-一、 --包括添加到查找路径
-c、 --压缩css输出
-d、 --比较显示输入和输出
-f、 --firebug在生成的css中发出调试信息
可由FireStylus Firebug插件使用
-l、 --行号在生成的css中发出注释
指示对应的手写笔线
--包含css在@import上包含常规css
-五、 --版本显示手写笔的版本
-h、 --帮助显示帮助信息

从命令行可以使用：

stylus -w folder/

或者再举一个例子：

stylus -w styl/*.styl -o css/

它将监视更改并编译该文件夹下的所有*.styl文件。

**我昨天来到这里，没有找到正确的答案。所以这篇后续文章是为任何跟我走同一条路的人写的**

我在设置手写笔命令行时也遇到了问题。我一直试图在全球范围内安装

stylus

$npm安装-g触控笔

而且会出错。我让它在一个项目中使用

grunt contrib触控笔

，但通过命令行，我没有得到任何工作。
即使是

$stylus--version

也没有返回任何内容。我试图更新

npm

，但它坏了

npm

，因此我最终重新安装了

节点

，以重新安装

npm

。然后，我可以重新安装

$sudo npm install-g stylus

，并可以获得

--版本

---

我还必须重新安装

grunt

以及通过

npm

全局安装的所有其他内容。…

这简要介绍了一些节点基础知识

0。组织代码。将主节点应用程序代码放入项目根目录中名为

app.js的文件是一种惯例

在app.js中，内容分为两个一般部分：

同步初始化：需要模块、构建目录、读取配置、数据库连接等。这些东西会阻塞，因此它们必须存在或很快消失
异步应用程序任务：启动服务器、后台进程、自动编译CSS&JS、路由、i/o等事件循环中的内容
1。构建应用程序时将手写笔编译为CSS。我们需要该模块。通常，这是在app.js的顶部完成的，以保持依赖关系

var stylus = require('stylus');

当该节点第一次运行app.js时，您需要这个js模块来构建CSS。这是基本思想：

stylus.render(stylus-code-string, function(err, css) {
  if (err) throw err;
  console.log(css);
});

这是官员

要使用Node的强大功能，您应该使用将手写笔文件读入缓冲区，然后将其转换为字符串，最后将其传递到
stylus.render（）
。然后，将结果发送到目标文件中。因为这是构建过程的一部分，所以它可以是同步的。但这不是你真正的问题

2。使用手写笔作为后台进程自动编译CSS。

此函数生成一个监视单个
.styl
文件并将包含的
.styl
文件编译为
.css
文件的。您不需要模块，只需安装手写笔可执行文件，使其在命令行上运行即可。（您已经这样做了）。此示例是使用触控笔版本0.5.0制作的。此外，您使用的文件夹路径（例如
build/styles
和
styles
）需要存在

function watchStyles(sourcefile, destinationfolder) {
  var Stylus = child_process.spawn('stylus', ['--sourcemap', '-w', sourcefile, '--out', destinationfolder]);

  Stylus.stdout.pipe(process.stdout); // notifications: watching, compiled, generated.
  Stylus.stderr.pipe(process.stdout); // warnings: ParseError.

  Stylus.on('error', function(err) {
    console.log("Stylus process("+Stylus.pid+") error: "+err);
    console.log(err);
  });

  // Report unclean exit.
  Stylus.on('close', function (code) {
    if (code !== 0) {
      console.log("Stylus process("+Stylus.pid+") exited with code " + code);
    }
  });
}

接下来，您需要在启动应用程序后调用此函数。将主
.styl
文件作为源文件传入。然后是您希望CSS进入的目标目录

// check that you passed '-w' parameter
if (process.argv[2] && (process.argv[2] == "-w")) {
  watchStyles('styles/app.styl', 'build/styles');
}

通过运行以下命令启动应用程序：
$node app.js-w

它有助于将
.styl
文件组织在一个
app.styl
下，以便
app.styl
的内容如下所示：

@import 'layout'
@import 'header'
@import 'main'
@import 'footer'
@import 'modal'
@import 'overrides'

首先，在本地安装手写笔
npm安装手写笔--如果没有安装，请保存开发人员

创建一个启动脚本，用于构建样式表，并在主手写笔文件中检测到更改时进行重建：

startup.js

var fs=require（'fs'））
var手写笔=r