[IDE & Editor] Sublime Text: CoffeeScript Sublime Plugin と build error ([Errno 2] No such file or directory)

毎回 coffee -c $file と打つのが大変なので、SublimeText の Build System から cmd+b でコンパイルできないか試したら、いろいろとはまりました。

[markdown]

> * [Xavura/CoffeeScript-Sublime-Plugin · GitHub](https://github.com/Xavura/CoffeeScript-Sublime-Plugin)

## 環境

### CoffeeScript の確認

nodebrew でインストールしており、下記のパスが通っている状態。

“`zsh:.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
“`

“`prettyprinted
% echo $path
% coffee -v
CoffeeScript version 1.6.3
“`

### path の確認

“`prettyprinted
% which node
/Users/****/.nodebrew/current/bin/node
% which coffee
/Users/****/.nodebrew/current/bin/coffee
% which cake
/Users/****/.nodebrew/current/bin/cake
“`

### CoffeeScript Sublime Plugin をインストール

シンタックスハイライトとビルドのために、`CoffeeScript` をインストールします。

> * [CoffeeScript Sublime Plugin by Xavura](http://xavura.me/CoffeeScript-Sublime-Plugin/)

1. `cmd+shift+p` で Command Palette… を呼び出す。
1. install package を選択。
1. `CoffeeScript` をインストール。
1. SublimeText2を再起動。

## 発生するエラー

主に2つの原因があるよう。

* CoffeeScript へのパスが認識されない。
* 割り当てられた `cake sbuild` コマンドが実行できない。

`cmd+b`で、このようなエラーが表示される。

“`prettyprinted
[Errno 2] No such file or directory
[cmd: [u’cake’, u’sbuild’]]
[dir: /Users/****/projects/lessons-coffee]
[path: /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/****/bin]
[Finished]
“`

### CoffeeScript.sublime-build を確認

build の設定は、`.sublime-build` というファイルで行われるようなので、内容を確認する。

“`prettyprinted
/Users/****/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/CoffeeScript.sublime-build
“`

“`json:CoffeeScript.sublime-build
{
“cmd”: [“cake”, “sbuild”]
, “path”: “/usr/local/bin:$PATH”
, “selector”: “source.coffee”
, “working_dir”: “$project_path”
, “variants”:
[
{
“name”: “Run”,
“cmd”: [“coffee”, “$file”]
}
]
}
“`

## 解決策1: CoffeeScript.sublime-build を編集する

但し、直接編集してしまうので、プラグインのバージョンアップで設定が消えるような気がする。

“`prettyprinted
/Users/****/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/CoffeeScript.sublime-build
“`

“`json:CoffeeScript.sublime-build
{
“cmd”: [“coffee”, “-c”, “$file”]
, “path”: “$HOME/.nodebrew/current/bin:/usr/local/bin:$PATH”
, “selector”: “source.coffee”
, “working_dir”: “$project_path”
, “variants”:
[
{
“name”: “Run”,
“cmd”: [“coffee”, “$file”]
}
]
}
“`

## 解決策2: build 設定を独自に作成する

追加された設定を優先して見てくれるよう。

“`prettyprinted
/Users/****/Library/Application Support/Sublime Text 2/Packages/User/builds/myCoffeeScript.sublime-build
“`

“`json:myCoffeeScript.sublime-build
{
“cmd”: [“coffee”,”-c”,”$file”],
“path”: “$HOME/.nodebrew/current/bin”,
“selector”: “source.coffee”
}
“`

> * [Sublime Text: Build System に独自の設定を加える | deadwood](https://www.d-wood.com/blog/2014/01/13_5258.html)

自分はお試し利用なので、この手法を使うことにしました。

## 解決策3: CoffeeScript Sublime Plugin の設定で動くように環境を整える

CoffeeScript のコンパイルには、いろいろと事前設定が必要らしく、このあたりを整備してみる。
実際の開発で必須の作業なのかどうか不明。

### path を通す

`cmd+,` で `Preferences – Settings – User` を呼び出し、設定を加える。

> * [device302.me – Sublime text 2で$PATHを通す – Preferences.sublime-settings](http://device302.me/post/42970132805/sublime-text-2-path-preferences-sublime-settings)

`,` を忘れずに。

“`json:Preferences.sublime-settings
“build_env”: {
“PATH”: “$HOME/.nodebrew/current/bin”
}
“`

この設定が追加されるのか、上書きされてしまうのか不明。

`echo $path` で表示されるパスをすべて入れた方が良いのかもしれない。

“`prettyprinted
% echo $path
/Users/****/bin /usr/local/bin /Users/****/.nodebrew/current/bin /usr/local/heroku/bin /Users/****/.rbenv/shims /Users/****/.rbenv/bin /usr/bin /bin /usr/local/sbin /usr/sbin /sbin
“`

この時点でパスが通るので、`cmd+shift+b` が使えるようになる。
.coffee ファイルを開いて実行すると、下記が表示される。

“`prettyprinted
Hello Word!
[Finished in 0.5s]
“`

### Workディレクトリに cakefile を作成する

この時点で `cake` コマンドを実行しても、下記のようなエラーになってしまう。

“`prettyprinted
% cake
/Users/****/.nodebrew/node/v0.10.22/lib/node_modules/coffee-script/lib/coffee-script/cake.js:111
throw new Error(“Cakefile not found in ” + (process.cwd()));
^
Error: Cakefile not found in /Users/****
“`

> * [[HowTo] Compiling and Setting Up Build Tools · jashkenas/coffee-script Wiki · GitHub](https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools)

上記を参考に、ワークディレクトリをこのような構成にする。

“`prettyprinted
.
├── cakefile
├── lib
└── src
└── hello.coffee
“`

cakefile に `task` として、`sbuild` を設定する。

“`javascript:cakefile
{exec} = require ‘child_process’
task ‘sbuild’, ‘Build project from src/*.coffee to lib/*.js’, ->
exec ‘coffee –compile –output lib/ src/’, (err, stdout, stderr) ->
throw err if err
console.log stdout + stderr
“`

以上で、`cmd+b` で `cake sbuild` が実行され、`lib/` 以下に `.js` ファイルが生成される。
但し、`working_dir` も見ているので、`.coffee` ファイルをいい加減に開いてしまうと、コンパイルでこけます。
[/markdown]