为Stylus设置自动编译

Question

我在我的mac上安装了node.js/stylus/nib,我可以在命令行上手动编译.styl文件.css.我也知道stylus.middleware()当我搜索如何在.styl更改时设置自动编译时会有这些事情不断出现,但是我不知道我应该如何实现它(我之前从未使用过node.js).

我将该代码放入哪个文件？

如何启动此代码以便始终运行？

我想我在节点方面缺少一些能够设置它的东西.

Answer 1

从命令行,您可以使用:

stylus -w folder/

或者只是为了另一个例子:

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

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

Answer 2

如果您stylus作为全局包安装(npm install stylus -g),则系统上有一个手写笔二进制文件.

$ 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

Answer 3

这简要介绍了一些Node基础知识.

0.组织代码.将主节点应用程序代码放入app.js项目根目录中调用的文件中是一种惯例.

在app.js内部,事物分为两个通用部分:

1. 同步初始化:需要模块,构建目录,读取配置,数据库连接等.阻塞的东西,因此它们必须存在或快速死亡.
2. 异步应用程序任务:启动服务器,后台进程,自动编译CSS和JS,路由,i/o等事件循环中的事物.

1.在构建应用程序时将Stylus编译为CSS.我们需要手写笔模块.通常这是在app.js的顶部完成的,以保持依赖关系.

var stylus = require('stylus');

Node第一次运行时app.js,你需要这个JS模块来构建你的CSS.这是基本的想法:

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

这是官方的Stylus Javascript API.

要使用Node的强大功能,您应该使用fs模块将一个手写笔文件读入缓冲区,然后将其转换为字符串,最后将其传递给stylus.render().然后,将结果发送到目标文件.由于这是构建过程的一部分,因此它可以是同步的.但这不是你的问题......

2.使用Stylus作为后台进程自动编译CSS.

此函数生成一个child_process,它监视单个.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'

Answer 4

好吧，我编辑了我的答案，因为你不想制作主页，然后连接资产没有任何意义，无法帮助你......但也许这个，......

http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language

在该网站的底部，您可以找到一个视频，该视频接近尾声时显示了如何通过命令行使用手写笔...

HTH，很抱歉造成误解......