intelliJ で sass を編集すると LiveEdit で動的に反映されるように

ついに intelliJ を購入し、早速持て余しているのですが、HTML + CSS + JS のお仕事がありそうなので(じゃあWebStormでいいじゃんというのは言わないで)少し環境を整えてみました。

使っているのは最高級のIntelliJですが、WebStorm などでもできると思います。

LiveEdit

編集した HTML を動的にブラウザで表示してくれるプラグインです。ブラウザにも拡張を入れる必要があります。

プラグインから LiveEdit を検索して導入したら、IDE Settings の Live Edit の項目を開いて設定を確認します。

liveedit-sass1

Enable live editing: 有効化

Highlight current element in browser: 編集中の要素にハイライトします

メニューの View -> Live Edit のチェックも確認します。

liveedit-sass2

Event Log を開くと Chrome の拡張のインストールを促されるのでインストールします。

liveedit-sass3

Open in brower で HTML ファイルを開き、Live Edit が監視を始めるとブラウザに表示が出てきます。

liveedit-sass5

この状態で HTML を編集すると、動的にブラウザへ反映されます。

liveedit-sass4

html で読み込んでいる css や js も同様に動的反映されるのですごいです。

(当たり前ですが、読み込み完了時に動作するスクリプトなんかはリロードの必要があります)

sass を使う

Live Edit の導入だけでもマークアップがしやすくなりそうですが、もうひとわがままで sass を更新すると勝手にコンパイルして、それを Live Edit で見せてくれるようにしてみました。

プラグインのFile Watchers を導入します。

liveedit-sass6

+ のメニューから SASS を選びます。今回は試してないですが、見ての通り他にも対応できるフォーマットがあります。

liveedit-sass7

sass や引数などを適宜設定します。

OUTPUT PATH はなんだか無視されるので、Arguments で設定しました。

liveedit-sass8

これで sass を編集すると css にコンパイルされ、Live Edit がそれをブラウザに反映してくれました。

slim を使う

slim も sass と同じように引数とパスを設定するだけです。

liveedit-sass9

slimrb にファイル名を渡すと、標準出力でパースした html が出力されるので、Create output file from stdout (標準出力からファイルを作成する) にチェックを入れて、Output paths を設定してみました。

実は上記の設定だと問題がありました…。

Output paths の $FileNameWithoutExtensions$ が元のファイルのディレクトリ構造も考慮してくれるかなーと思ったのですが、考慮してもらえず、別ディレクトリの同じファイル名は上書きされてしまいます。

slim, sass は src のような別ディレクトリを切って、作業したいと思っているので、この辺を解決できたらいいと思います(アドバイスください)

$FileNameWithoutExtensions$ という指定だけなら、同じディレクトリにパース済みのファイルが生成されます。

普段コマンドから実行していたならその引数をそのまま渡してあげるようにすればよいので、他にも、フォーマット選択で選べるものなら同じような設定で動的にコンパイルが設定できると思います。

(でも coffeescript は出力先が上手く行かなかった…なにか間違ったかな…?)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする