web-dev-qa-db-ja.com

スタイラスの自動コンパイルの設定

Macにnode.js/stylus/nibをインストールしましたが、コマンドラインで.stylファイルを.cssに手動でコンパイルできます。また、.stylが変更されたときに自動コンパイルを設定する方法を検索すると、このstylus.middleware()が発生し続けることも知っていますが、どのように実装するのかわかりません（Iこれまでnode.jsを使用したことはありません）。

そのコードをどのファイルに入れますか？

このコードを開始して常に実行されるようにするにはどうすればよいですか？

これを設定できるようにするために、ノード側でいくつか不足していることがあると思います。

cssnode.jsstylus
20
ryanzec

コマンドラインから次を使用できます。

stylus -w folder/

または別の例として：

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

変更を監視し、そのフォルダーの下にあるすべての* .stylファイルをコンパイルします。

26
k3liutZu

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
9
TheHippo

ここでは、Nodeの基本について簡単に説明します。

0。コードの整理。メインのNodeアプリケーションコードをプロジェクトルートの_app.js_というファイルに入れるのが慣例です。

App.js内では、物事は2つの一般的な部分にグループ化されています。

  1. synchronous初期化：モジュール、ビルドディレクトリ、読み取り構成、データベース接続などが必要です。ブロックするものなので、存在するか、すぐに停止する必要があります。
  2. 非同期アプリタスク：サーバーの起動、バックグラウンドプロセス、CSSとJSの自動コンパイル、ルーティング、I/Oなど。イベントループにあるもの。

1。アプリをビルドするときにスタイラスをCSSにコンパイルします。スタイラス モジュールが必要です。通常、これは依存関係をまとめるためにapp.jsの上部で行われます。

_var stylus = require('stylus');
_

Nodeが_app.js_を初めて実行するときは、CSSを構築するためにこのJSモジュールが必要です。これが基本的な考え方です。

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

これが公式です Stylus Javascript API 。

Nodeの機能を使用するには、 fs module を使用してスタイラスファイルをバッファに読み込み、それを文字列に変換して、最後にstylus.render()に渡す必要があります。次に、結果を宛先ファイルに送信します。これはビルドプロセスの一部であるため、同期させることができます。しかし、これは本当にあなたの質問ではありません...

2。バックグラウンドプロセスとしてStylusを使用してCSSを自動コンパイルします。

この関数は、単一の_.styl_ファイルを監視し、含まれている_.styl_ファイルを_.css_ファイルにコンパイルする child_process を生成します。このためのモジュールは必要ありません。コマンドラインで実行されるようにスタイラス実行可能ファイルをインストールするだけです。 （あなたはすでにこれを行っています）。この例は、スタイラスバージョン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_ファイルを1つの_app.styl_に整理して、_app.styl_の内容が次のようになるようにするのに役立ちます。

_@import 'layout'
@import 'header'
@import 'main'
@import 'footer'
@import 'modal'
@import 'overrides'
_
6
Benxamin

まず、スタイラスをローカルにインストールします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('???? Stylesheet built successfully.');
      });
  });
}

タイプnode startup.jsターミナルで。 「スタイルシートが正常にビルドされました」というメッセージが表示されます。メインのスタイラスファイルを変更するときはいつでも。

彼らのウェブサイトにスタイラスjavascript apiに関する良いドキュメントがあります。

2
muratgozel

** 昨日ここに行き、正しい答えが見つかりませんでした。したがって、このフォローアップは、私と同じ道をたどる他の人を対象としています... **

スタイラスのコマンドラインの設定にも問題がありました。 stylusをグローバルにインストールしようとし続けました
$ npm install -g stylus
エラーが発生します。 grunt-contrib-stylusを使用して1つのプロジェクトで動作させましたが、コマンドラインからは何も動作しませんでした。
$stylus --versionでさえ何も返しませんでした。 npmを更新しようとしましたが、npmが壊れたため、nodeを再インストールしてnpmを再インストールしました。その後、$ Sudo npm install -g stylusの新規インストールを実行し、--versionを取得できました。
また、gruntとnpm ..を介してグローバルにインストールした他のすべてを再インストールする必要がありました。

2
Jason Lydon

OKホームページを作成してから接続する必要がないため、回答を編集しました。アセットは意味がなく、役に立ちません...しかし、おそらくこれは...

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

そのサイトの下部に、コマンドラインからスタイラスを使用する方法を最後に示すビデオがあります...

HTHと誤解してすみません...

0
silverfighter