それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

phpstormでSCSSを自動的にトランスパイルする。

css を作成するのに、scss をコンパイル

gulp のタスクとか、python の filewatcherとかでやってたんだけど、いい加減に限界だし、codekit も買ってみたんだけど、なんかめんどくさい。

ふと、Jetbrains の製品ならできるだろうと思ったけど、調べるのがめんどくさいので、やってなかった。

ざっくりやったので、あとで見直すためにメモをとる。

設定方法

プロジェクトの設定( phpstorm にはプロジェクトごとの設定がないので、設定を開くとプロジェクトごとの部分はプロジェクト毎になる。)

設定画面から、file watcher を探してscssのWatcherを追加

f:id:takuya_1st:20180606213122p:plain

設定に項目が追加されたら、ファイル名を指定する。

わたしの場合、assets/style.scss でインポートするように書いているので、 assets/style.scssstyle.css style.css.map に展開するように設定を書いた。

f:id:takuya_1st:20180606213607p:plain

ファイル名やパスが解らない場合は

コンソールに常に出力するようにし、STDOUTをアウトプットするようにした。とりあえず設定中はチェックオンにした。

f:id:takuya_1st:20180606213758p:plain

正常に出力できたら

設定のチェックをを外した。 auto save (自動保存)で File Watcher のジョブをキックするかは迷ったけど、とりあえずオンで。

f:id:takuya_1st:20180606214013p:plain

あ、これ便利。

設定してみて思ったんだけど、これ便利だわ。外部のgulpタスクをいつも内蔵ターミナルで起動してた手間がなくなった。

ほかに、babel ができたり、任意のコマンドに対応しているので、ファイルが更新されたら即時 rsync 起動とかできて便利になるかもしれない。

ちなみに、Vscode でもできそう

visual studio codeにもtask があって同じようなことができそう。

https://code.visualstudio.com/docs/editor/tasks

参考資料

http://www.webopixel.net/develop/860.html