Sublime Text 2でStylus + Nibのコードをビルドする

- by konitter

SassにはCompassというアツいライブラリがありますが、Stylusにも「nib」というライブラリがあります。このNibを使ったコードをSublime Textからビルドする方法です。

nib

(1) Stylus + Nibのインストール

以下のコマンドでインストールします。要Node.js(npm)。
グローバルインストールしてますが、-g無しのローカルインストールでもどっちでもお好みな方で。

$ [sudo] npm install -g stylus nib

以下でバージョン番号が出ればインストール成功。
nibにはバージョン番号を出力するコマンドはないです。

$ stylus -V
0.31.0

(2) packageのインストール

次に、Sublime TextからStylusコードをビルドする環境を準備します。 Package Controlから以下のパッケージ名を選んでインストールします。

(3) Stylusコードをビルド

まずはNib無しのStylusコードをビルドしてみます。

button
    border-radius 5px

all.stylというファイル名で適当にこんな感じのコードを書いて、Ctrl + Bするとビルドが走り、エディター下部に同ディレクトリにall.cssというファイル名でコンパイルされたことを示すメッセージが出ます。

all.cssを開いてみると、以下のようになっているはずです。

button {
    border-radius: 5px;
}

もし記述にエラーがあってコンパイルに失敗する場合は、どの行にどんな問題があるかを示すメッセージが出ます。

(4) Nibを使ったコードをビルド

次にNibを使ったStylusコードをビルドしてみます。

@import 'nib'

button
    border-radius 5px

こんな感じにさっきのall.stylにNibの書式をインポートする記述を冒頭に追記します。

ただこの状態でビルドしても「nib.stylが見つからない」というようなメッセージが出て意図通りにはなりません。当たり前ですね。

Nib込みのコードをコンパイルするには、Stylus側にコンパイル時にNibというライブラリを読み込んでねということを伝える必要があります。

まずは、Stylusのビルドの設定ファイル(Preferences > Browse Packages > Stylus > Stylus.sublime-build)を開きます。

ビルドオプションの詳しくは公式のドキュメントをご確認ください。

{
    "cmd": ["stylus", "$file"],
    "file_regex": ".",
    "selector": "source.stylus",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "linux":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "cmd": ["stylus.cmd", "$file"]
    },

    "variants": [
        {
            "name": "compress",
            "cmd": ["stylus", "-c", "$file"],

            "windows":
            {
                "cmd": ["stylus.cmd", "-c", "$file"]
            }
        }
    ]
}

上記の2行目を以下のように変更します。

{
    "cmd": ["stylus", "-I", "/example/path/node_modules/nib/lib", "$file"],
    ...

-IはStylusのインクルードオプションで、その次にインストールしたNibの/libまでのパスを書きます。

これで保存して、さっきのall.stylをビルドしてみるとこうなるはずです。

button {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

プレフィックスを付けてくれてますね。
他にも様々なミックスインがありますので、詳しくは公式サイト等をご確認ください。

また、compress時にもNibを使う場合は以下のようにします。

...
    "variants": [
        {
            "name": "compress",
            "cmd": ["stylus", "-c", "-I", "/example/path/node_modules/nib/lib", "$file"],
            ...

compress版をビルドするには、コマンドパレット[Ctrl + Shift + P]から「Build: compress」を選びます。
いちいち選ぶのが面倒な場合は、適宜キーマップを設定してください。

上記オプション"name"の値を"Run"に変更すると、コマンド[Ctrl + Shift + B]一発でビルドできます。
ToolsメニューのRunからも実行できます。

おまけ(Winユーザー向け)

Winの方はここまでの方法ではNib込みのコードはビルドできません。
Winの場合は、Win用コマンドを設定している2箇所に同様の記述を書き加えます。

...
    "windows":
    {
        "cmd": ["stylus.cmd", "-I", "/example/path/node_modules/nib/lib", "$file"]
        ...

これでOKなのですが、もう少しスマートに書くこともできます。

ビルドそれ自体は、execコマンドを使うのですが、"shell"オプションをtrueにすることでcmd.exeやbashなどのシェルコマンドとして実行できるようになります。

シェルコマンドが実行できる環境があれば、以下のように書けます。

{
    "cmd": ["stylus", "-I", "/example/path/node_modules/nib/lib", "$file"],
    "file_regex": ".",
    "selector": "source.stylus",
    "shell": true,

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "linux":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "variants": [
        {
            "name": "compress",
            "cmd": ["stylus", "-c", "-I", "/example/path/node_modules/nib/lib", "$file"],
            "shell": true
        }
    ]
}

スッキリしました。