WEBOPIXEL

PhpStormだけでファイル監視してSASS/SCSSをコンパイルする

Posted: 2014.02.14 / Category: 開発環境 / Tag: 

前のバージョンまではちょっと設定が複雑だったので使用していなかったのですが、PhpStorm7になってSASS/SCSSなどプリプロセッサファイルの監視がかなり簡単になっていたのでご紹介します。PhpStorm7での解説ですが、WebStormなど他JetBRAINS製品でもほぼ変わらないはずです。

Sponsored Link

準備

PHPStormでファイルの監視はしてくれますが、コンパイル自体は別途環境が必要になりますので、SASSならRuby&Gemを予めインストールしておきます。
下記記事を参考にしてください。

WindowsにCompassをインストールしてSASS/SCSS環境を構築する

File Watchersの追加

メニューの「File」→「Settings..」でSettingsウインドウを開き、左のメニューから「File Watchers」を選択します。

最初は何も項目がないと思いますので、右側の「+」ボタンをクリックします。
SCSSの他にも色々項目が表示されますが、今回はSCSSを選択します。

File Watchersの追加

「Edit Watcher」画面が表示されます。

Edit Watcher画面

ここでコンパイラやCSSの書き出し場所の設定などを行います。基本そのままでいいのですが、標準ではSCSSと同階層に書きだされたCSSが出力されてしまうので「Arguments」を変更して、「CSS」「SCSS」フォルダで分けるようにしてみます。

–no-cache –update $FileName$:../css/$FileNameWithoutExtension$.css

Compassを使用する

Compassを使用する場合、別に設定が必要です。
Settingsウインドウを開き、左のメニューから「Compass Support」を選択。
「Enable Compass Support」にチェックを入れるだけで基本的にパスの設定は自動で挿入してくれます。
あとは先ほどと同じように「File Watchers」で「compass scss」を選択しましょう。
出力ファイルパスなどは「config.rb」で行っていますので、ここでの設定は特に必要ないですね。

以上で設定は終わりです。
SASS/SCSSの他にもCofeeScriptやLESSとか標準で対応していたり、カスタムで設定できたりもします。
別途、監視プログラムを実行しなくてもいいので気軽に使っていけそうですね。