Sublime Text 2でHaml, Sass, CofeeScriptを保存時に自動コンパイル

みんな大好きHaml、Sass(SCSS)、CoffeeScriptを、Sublime Textで保存時に自動でコンパイルする。

まずは、Package Controll（(Ctrl or ⌘) + Shift + P）から、SublimeOnSaveBuild をインストール。
次に、メニューから、Sublime Text 2 → Preference → Package Settings → SublimeOnSaveBuild → Settings - User を選択。

開いたファイルに以下のように記述。

{
    "filename_filter": "\\.(css|js|sass|less|scss|haml|coffee)$",
    "build_on_save": 1
}

次は、メニューから、Tools → Build System → New Build System を選択。
僕はMacなのでこんな感じ。
Windowsの人はosxのところをwindowsとかにすればいいと思う。
pathにhamlコマンドのパスを書く。

{
  "cmd": "haml",
  "selector": "source.haml",
  "working_dir": "${file_path}",
        
  "osx":
  {
    "cmd": ["haml", "$file", "$file_path/$file_base_name.html"],
    "path": "/users/ikasama/.rbenv/shims:$path"
  }
}

（haml.sublime-build）

SASS、CoffeeScriptも同様。
メニューから、Sublime Text 2 → Preference → Package Settings → SublimeOnSaveBuild → Settings - User を選択して、こう。

{
  "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
  "selector": "source.sass, source.scss",
  "line_regex": "Line ([0-9]+):",

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

（sass.sublime-build）

{
  "cmd": "coffee",
  "selector": "source.coffee",
  "working_dir": "${file_path}",
 
     
  "osx":
  {
    "cmd": ["coffee", "-c", "$file"],
    "path": "/usr/local/bin:$PATH"
  }
}

（coffee.sublime-build）

これで保存した時に自動でコンパイルできるようになった。
快適快適〜。