Mac に node.js/stylus/nib をインストールしました。コマンド ラインで.stylファイルを手動でコンパイルできます。また、変更時に自動コンパイルをセットアップする方法を検索すると、.cssこのようなことが引き続き発生することも知っていますが、それをどのように実装する必要があるのか わかりません（以前はnode.jsを使用したことがありません）。stylus.middleware().styl
そのコードをどのファイルに入れますか?
常に実行されるように、このコードを開始するにはどうすればよいですか?
これをセットアップできるようにするために、ノード側でいくつかのことが欠けていると思います。
コマンドラインから次を使用できます。
stylus -w folder/
または別の例として：
stylus -w styl/*.styl -o css/
変更を監視し、そのフォルダーの下にあるすべての*.stylファイルをコンパイルします。
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
これは、いくつかのノードの基本を簡単にカバーしています。
0. コードの編成。メイン Node アプリケーション コードをapp.jsプロジェクト ルートで呼び出されるファイルに配置するのが慣例です。
app.js 内では、次の 2 つの一般的な部分にグループ化されます。
1. アプリのビルド時に Stylus を 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 モジュールを使用してスタイラス ファイルをバッファに読み込み、それを文字列に変換して、最後にstylus.render(). 次に、結果を宛先ファイルに送信します。これはビルド プロセスの一部であるため、同期することができます。しかし、これは本当にあなたの質問ではありません...
2. バックグラウンド プロセスとして Stylus を使用して CSS を自動コンパイルします。
この関数は、単一のファイルを監視し、含まれているファイルをファイルにコンパイルするchild_processを生成します。これにはモジュールは必要ありません。コマンド ラインで実行できるようにスタイラス実行可能ファイルをインストールするだけです。（あなたはすでにこれを行っています）。この例はスタイラス バージョン0.5.0で作成されました。また、使用するフォルダー パス (例:および) が存在する必要があります。.styl.styl.cssbuild/stylesstyles
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.stylapp.styl
@import 'layout'
@import 'header'
@import 'main'
@import 'footer'
@import 'modal'
@import 'overrides'
**昨日ここにたどり着きましたが、正しい答えが見つかりませんでした。したがって、このフォローアップは、私と同じ道をたどる他の人のためのものです... **
スタイラスコマンドラインの設定にも問題がありました。stylusグローバルにインストールしようとし続け
$ npm install -g stylus
、エラーが発生しました。私はそれを1つのプロジェクトで動作させましたgrunt-contrib-stylusが、コマンドライン経由では何も動作しませんでした.
何も$stylus --version返さなかった。更新しようとしnpmたら壊れてしまっnpmたので、再インストールnodeするために再インストールすることになりましたnpm。その後、の新規インストールを実行$ sudo npm install -g stylusでき、--version.
また、再インストールする必要がgruntあり、その他すべてを介してグローバルにインストールしましたnpm...
あなたはホームページを作りたくないので、答えを編集しました.connect-assetsは意味がなく、あなたを助けることはできません...しかし、多分これ...
http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language
そのサイトの下部に、コマンドラインからスタイラスを使用する方法を最後近くに示すビデオがあります...
HTHと誤解してすみません...