20

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

我将该代码放在哪个文件中？

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

我想我在节点方面遗漏了一些东西才能进行设置。

4

6 回答 6

27

从命令行，您可以使用：

stylus -w folder/

或者只是另一个例子：

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

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

于 2012-11-09T08:14:15.783 回答
9

如果您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
于 2012-06-12T11:35:29.197 回答
6

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

0. 组织代码。按照惯例，将您的主要 Node 应用程序代码放入app.js项目根目录中调用的文件中。

app.js 内部的东西被分为两个一般部分：

  1. 同步初始化：需要模块、构建目录、读取配置、数据库连接等。阻塞的东西，所以它们必须存在或快速消亡。
  2. 异步应用程序任务：启动服务器、后台进程、自动编译 CSS 和 JS、路由、I/O 等。事件循环中的内容。

1. 在构建应用程序时将 Stylus 编译为 CSS。我们需要stylus模块。通常这是在 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 文件读取到缓冲区中，然后将其转换为字符串，最后将其传递到stylus.render(). 然后，将结果发送到目标文件。由于这是构建过程的一部分，因此它可以是同步的。但这不是你的问题......

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

此函数生成一个child_process，它监视单个.styl文件并将包含.styl的文件编译成一个.css文件。您不需要为此使用模块，只需安装 stylus 可执行文件，以便它在命令行上运行。（你已经这样做了）。这个例子是用手写笔版本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'
于 2015-02-26T00:19:40.693 回答
2

**我昨天来到这里并没有找到正确的答案。因此，此后续行动适用于与我走同样道路的任何其他人...... **

我在设置手写笔命令行时也遇到了问题。我一直在尝试stylus全局安装
$ npm install -g stylus
，但会出错。我让它在一个项目中工作，grunt-contrib-stylus但通过命令行我没有得到任何工作。
甚至$stylus --version什么都没回。我试图更新npm，但它坏了npm，所以我最终重新安装node重新安装npm。然后我能够重新安装$ sudo npm install -g stylus并获得--version.
我还必须重新安装grunt以及我通过npm...在全球范围内安装的所有其他东西

于 2014-01-29T15:36:46.740 回答
2

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

创建一个启动脚本来构建您的样式表并在您的主手写笔文件中检测到更改时重新构建：

启动.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(' Stylesheet built successfully.');
      });
  });
}

输入node startup.js终端。您将看到一条消息“样式表构建成功”。每当您更改主手写笔文件时。

在他们的网站上有很好的关于 stylus javascript api 的文档。

于 2017-02-04T18:16:08.510 回答
0

好的，我编辑了我的答案，因为您不想创建主页，然后 connect-assets 没有意义，也无法帮助您……但也许这个，……

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

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

HTH，抱歉造成误会...

于 2012-06-12T11:03:02.127 回答