【Slim】Sublime Text 3 × Mac環境でのSlim環境構築

以前から気になっていたSlimをやっと！導入しました。

設定方法をまとめます〜。

 

【追記】

なぜだかこの記事で書いたbuild設定が

エラーを吐くようになってしまいました……。
誰かここがあかんとかわかれば教えてください。。

今はpreprosを使っています。現在有料ですが、

相対指定したslimに変更があった際、自動で検出してコンパイルしてくれるのでおすすめです！！→2017年現在はgulp使ってます〜！

 

Slimのインストール

WinであればRuby（というSlimを動かすために必要なもの）のインストールが必要なんですが、
Macには既にRubyがインストールされているので（らっき〜）、いきなりSlimのインストールからはじめます。

 

1. Lanchpadを起動し、「その他」からターミナルを起動して下さい。
2. PC名:/ ユーザー名$ と出てきますので、$より後を入力して以下のようにして下さい。

 

PC名:/ ユーザー名$ sudo gem install slim

 

※他ブログで「gem install slim」とだけ書いている方もいますが、私は管理者権限にひっかかってしまいました……。
sudoをつけたほうが確実と思われます。

 

3. インストールが終わったら、そのままターミナルで

 

slimrb --help

 

を実行してみて、Slimのオプションが出てくるか確認してください。
無事出てきたらインストール完了です！

 

Sublime Text 3の設定

ではSlimのインストールも終わったので、Sublime Textのほうの設定をしていきます。

Package Controlがインストール済であるという前提で進めます。

まだの人はこちらのサイトを参考にインストールしてください。

 

まず、Slimのコードを読みやすくしましょう。

「Ruby Slim」というPackageをインストールしてください。

コードをハイライトできます。

 

そして肝心のBuild設定。これがこの記事の目玉です。笑

.slimで記述されたファイルを.htmlに書き出すための設定です。

 

1. 【ツール > Build System > New Build System】を選択して下さい。

ここにJSONでBuildのコードを書きます。

 

私はここで少し詰まりました。ググってもいいコードが落ちてない。。

色々調べた結果、私は以下のように記述してます。おすすめ。

 

{  "path": "$file_path",   "cmd": "slimrb -p $file_name > $file_base_name.html",  "selector": "text.slim",  "shell": "true",  "encoding": "cp932"  }

 

解説すると、

"path": "$file_path"

.slimファイルがあるディレクトリに移動します、これmustです。詳しくは次の項目にて

 

"cmd": "slimrb -p $file_name > $file_base_name.html"

移動したディレクトリの中の現在のファイルを、同じファイル名.htmlで同じフォルダに書き出します。

 

私が一番にネットで発見したJSONのコードは、さきほどのpathの記述をせずに、ここを

絶対パス/ファイル.slim > 絶対パス/ファイル.htmlとしていました。

 

しかし！これやるとSlimのコードの中で、更に他の.slimを相対指定して呼び出したい！って時に詰むんですよね。

というか私が実際そこで詰まったのでした、、なので先ほどのpathは入れてあげてください。

 

"selector": "text.slim"

ツール > Build SystemがAutomaticになっていたときには、
拡張子がslimだったらこのBuild Systemを適用します

 

"shell": "true"

shellを通じてコマンドを実行します
※私もよくわかってないんですが、shellを通さないとエラーが出たりするようです。私も出ました

 

"encoding": "cp932"

エンコードはCP932に指定
※これもないとエラー出ることがあるみたいです

 

2. 記述できたら、わかりやすくslim.sublime-buildとかの名前で保存しましょう

保存場所は変えないでOKです。

 

れっつビルド

ではさっそくSlimにチャレンジ。

適当にコードを書いてみましょう。

 

doctype html
html
head
  meta charset="utf-8"
  title テストテスト
body.test
  #test
  h1
    p テストテスト
    p
      |
        テストテストテスト
        テストテストテスト
    ul
      li テスト1
      li テスト2

 

コード見づらいので、画面の一番右下をクリックして「Ruby Slim」の選択をお忘れなく。

 

記述が終わったらCommand + BでBuildしてみましょう！

（Build SystemをきちんとsilmもしくはAutomaticに合わせておいてくださいね）

 

同じフォルダにHTMLファイルが出力されていればOK。

快適なSlimライフを〜。