设置自动编译手写笔(Setting up auto compile for Stylus)

我已经安装在我的Mac的node.js /笔/笔尖，我可以手动编译.styl文件.css在命令行上。 我也知道有这个stylus.middleware()的东西，不断来临，当我搜索如何设置自动编译时的.styl的变化，但是我不知道我是多么应该实现它（我从来没有使用节点.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:

此简要介绍一些基本的节点。

0.1组织代码。 它是把你的主节点的应用代码到一个名为公约app.js在项目的根。

内部app.js东西分为两个通用零部件：

1. 同步初始化：需要的模块，建立目录，读取CONFIGS，DB连接等东西堵塞，所以它们必须存在或迅速死亡。
2. 异步应用任务：启动服务器，后台进程，自动编译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);
});

下面是官方的Stylus Javascript API第 。

要使用节点的电源，你应该使用读笔文件FS模块到缓冲区中，然后将其转换为字符串，并最终将其传递给stylus.render() 然后，将结果发送到目标文件。 由于这是构建过程的一部分，也可以是同步的。 但是，这是不是真的你的问题...

用手写笔2.自动编译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:

** 我会在这里结束昨天并没有找到正确的答案。 所以这个跟进的是为别人谁遵循相同的路径我... **

我有一个问题设置手写笔命令行太多。 我一直在试图安装stylus全球
$ npm install -g stylus
并会出现错误。 我是有一个项目正在与grunt-contrib-stylus ，而是通过命令行我没有得到任何工作。
即使$stylus --version没有任何回报。 我尝试更新npm就坏了npm ，所以我最终重新安装node重新安装npm 。 然后，我能够做一个新安装的$ sudo npm install -g stylus ，并能得到--version 。
我也不得不重新安装grunt和其他一切我已经通过全球的装机npm ...

Answer 5:

首先，安装手写笔本地npm install stylus --save-dev ，如果你没有。

创建构建您的样式表，每当改变在主笔文件中检测重建启动脚本：

startup.js

var fs = require('fs')
var stylus = require('stylus')

// Define input filename and output filename
var styleInput = __dirname + '/dev/stylus/main.styl'
var styleOutputFilename = 'main.css'
var styleOutput = __dirname + '/static/' + styleOutputFilename
var stylusPaths = [__dirname + '/dev/stylus', __dirname + '/dev/stylus/libs']

// Build stylesheet on first execute
buildStyles(styleInput, styleOutput, stylusPaths)

// Watch stylus file for changes.
fs.watch(styleInput, function(eventType, filename) {
  if (filename) {
    buildStyles(styleInput, styleOutput, stylusPaths)
  } else {
    console.log('no filename found. probably platform doesnt support it.');
  }
});

function buildStyles(input, output, paths) {
  stylus(fs.readFileSync(input, 'utf-8'))
    .set('paths', paths)
    .set('include css', true)
    .set('watch', true)
    .render(function(err, css) {
      if (err) throw err;

      fs.writeFile(output, css, (err) => {
        if (err) throw err;

        console.log('