phpstorm で coffeescript を使う

2014年5月27日更新 view: 30 view
photoBy: http://www.unixstickers.com/image/cache/data/stic…

coffee script ってなに?

javascriptをスッキリ書けて、rubyに似てる。

インストールの方法

windows のコマンドプロンプトで

coffee -v

とやってバージョンが出力されるまでは色々ググって下さい。
インストールしてもバージョンが出ない場合は以下をやってね。

パスを通す

スタート > コンピューター右クリック > システムの詳細設定 > システムの環境変数 > 下のPath の値に以下を追記

C:\Users\ユーザー名\AppData\Roaming\npm

必ず追記すること。ユーザー名は変更してね。

ここまでできたら phpstorm で使う準備。

phpstormでの設定

なんでか知らんがフォルダ名が長すぎるとエラーになるみたい。
だから作りたいjsを単体でprojectにする。

スッキリとしたプロジェクトで実行

また、ドライブが違うと、以下のエラーも出る。

phpstorm を c ドライブに。
編集したいファイルを d ドライブにおいててもバグるので、ドライブを合わせたほうが良いかも。

An exception occurred while executing watcher 'CoffeeScript'. Watcher has been disabled. Fix it.
Cannot run program "C:\Users\pc1\AppData\Roaming\npm\node_modules\coffee-script\bin\coffee" (in directory "D:\Dropbox\website\hidekisakuravps\qjiin.com\app\webroot\js\coffee\coffee"): CreateProcess error=193, %1 ‚͗LŒø‚È Win32 ƒAƒvƒŠƒP

phpstormのバグか。。。?

設定

file watchers という plugin を phpstormでインストール

file watchers の設定

show console

always に。

スポンサードリンク

program

C:\Users\ユーザー名\AppData\Roaming\npm\coffee.cmd

Arguments

--compile -o ../js/ $FileName$

これで hoge.coffee の 一つ上の階層の js に hoge.js ができる。

/js/hoge.js

/coffee/hoge.coffee

って感じ。

working directory

$FileDir$

output paths to refresh

$FileNameWithoutExtension$.js

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月20日 ( 木 ) にアクセスが多かった記事はこちら!