Sublime2でhamlとbabelる

パス周りでやたらと苦労したので備忘録。

絶対パスで行く

rbenvとか使ってると、いろいろと苦労したので。。

##rbenv + haml
事前にrbenvのglobalにhamlをインストールしておく

json|Haml.sublime-build

{
  "cmd": "haml",
  "selector": "text.haml",
  "working_dir": "${file_path}",
        
  "osx":
  {
    "cmd": ["/users/hiraotakenori/.rbenv/shims/haml","-E", "UTF-8", "$file", "$file_path/$file_base_name.html"]
  }
}

##rbenv + sass
事前にrbenvのglobalにsassをインストールしておく
sublime2がsassをsassと認識する必要があるので、Sassパッケージなどを入れて、sassを認識させておく。

json|Saas.sublime-build

{
  "cmd": "sass",
  "selector": "source.sass",

  "osx":
  {
	  "cmd": ["/users/hiraotakenori/.rbenv/shims/sass", "$file:${file_path}/${file_base_name}.css"]
  }
}

##babel
事前にbabelを入れてes2015でコンパイルできるように設定しておく

npm install babel-cli -g
npm install --save-dev babel-preset-es2015

json|.babelrc

{
  "presets": ["es2015"]
}

sublime2さんがbabelもnodeも認識してくれないので、絶対パスで。
sublime2にes6系のパッケージを入れて、es6=javascriptと覚えさせておく。

json|Haml.sublime-build

{
  "cmd": "node",
  "selector": "source.js",
  "working_dir": "${file_path}",
        
  "osx":
  {
    "cmd": ["/usr/local/bin/node", "/usr/local/lib/node_modules/babel-cli/bin/babel", "$file", "--out-file", "$file_path/$file_base_name.js"]
  }
}

##SublimeOnSaveBuild
自動的にソースをビルドしてくれる素敵プラグイン。
jsをコンパイルされると変になりそうなので、外しておく。

json|SublimeOnSaveBuild.sublime-settings

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