CakePHP3 + PhpStorm + Compass の設定

最新の CakePHP3 では

 composer install

すると

　src/Sass
　config.rb

が作成される様子なので、このに準ずる事とする。

無ければ以下で作成する

composer.json があるプロジェクトディレクトリ内に移動して初期設定のコマンドを実行。

$ compass create --sass-dir "src/Sass" --css-dir "webroot/css" --javascripts-dir "webroot/js" --images-dir "webroot/img"

src/Sass/screen.scss
　src/Sass/print.scss
　src/Sass/ie.scss
　webroot/css/ie.css
　webroot/css/print.css
　webroot/css/screen.css

が作成されるのが嫌って人は --bare オプションを追加して。

$ compass create --bare --sass-dir "src/Sass" --css-dir "webroot/css" --javascripts-dir "webroot/js" --images-dir "webroot/img"

　src/Sass
　config.rb

が作成されるはず。（他は元からあるはず。）

config.rb の中身はテキストなので確認する。

後でやっぱり

　src/Sass/screen.scss
　src/Sass/print.scss
　src/Sass/ie.scss
　webroot/css/ie.css
　webroot/css/print.css
　webroot/css/screen.css

を作成したいって人は。

$ compass init

を実行すればOK。

--bare の場合はまだ作成されないけど、コンパイルが実行されると

.sass-cache

が作成されるはずなのでこれは .gitignore に追加してバージョン管理されないように。


ここかまでが無ければの人の下ごしらえ。
で、ここから phpstorm の設定方法。

１．phpstorm の設定ウィンドウを開く

　File > Settings (Ctrl + Alt + s)


２．Compass の設定画面に移動する。

　Languages & Frameworks > Sytlesheets > Compass

　この設定はコンパイルの自動化だけなら必要無し。
　恐らく何か便利機能のため。
　１つしかできないので管理用画面と会員用画面みたいな複数で config.rb を分けたい時は多分どうしようもない。。


３．Enable Compass support にチェックを入れる。

自動的に Compass executable file: と Config Path: は設定されるはず。

　Compass executable file: compass コマンドのパス
　Config Path: config.rb のパス


４．File Watchers の設定画面に移動する。

　Tools > File Watchers


５．設定を追加する。

　右に緑の十字アイコンの Add（追加）ボタン をクリックして Compass SCSS を選択。


６．以下の内容を設定

デフォルトである程度適切に設定されてるはずだが、 Arguments: だけ変更。

　File type: SCSS Style Sheet
　Scope: Project Files
　Program: compass or compass.bat のパス
　更新　Arguments: compile
　Output paths to refresh: 空
　Working directory: config.rb を置いているディレクトリパス

※ 動作確認したい場合は Show console: Always に変更して確認でもOK。


以上！