タグ別アーカイブ: ClosureCompiler

WebStormの素敵な機能、その2。FileWatchers

1件のフィードバック

前回の記事で、WebStormの素敵な機能LiveTemplatesを紹介しましたが、今回は6以降から使えるFileWatchersです。

20130418_img3
※投稿時点での筆者のバージョンは6.0.1です。

FileWatchers機能は、SASSやCoffeeScriptやTypeScriptなどコンパイルが必要なファイルを、保存時に自動でコンパイルしてくれる機能です。流行りのGrunt.jsのようなことをIDEだけで実現出来る機能です。

FileWatchers機能は「File > Settings > File Watchers」にあります。

20130422_img2

左上の「+」ボタンをクリックすると、各種設定ができます。

20130422_img7

  • custom : カスタム設定
  • Clousure Compiler : Google製のJavaScript最適化ツール
  • CoffeeScript : JavaScriptのコードに変換されるスクリプト
  • CoffeeScript Source Map : SourceMaps付きの上記スクリプト
  • Dart2JS : Google製のウェブ向けプログラミング言語DartをJavaScriptにコンパイルするツール
  • LESS : Node.jsベースのCSS拡張メタ言語
  • SASS : RubyベースのCSS拡張メタ言語。インデント記法
  • SCSS : RubyベースのCSS拡張メタ言語。CSS記法
  • TypeScript : MicroSoft製のJavaScript拡張言語。JavaScriptにコンパイル可能。
  • UglifyJS : Node.jsベースのJavaScriptのコンパイルツール
  • YUI Compressor CSS : Yahoo!製のCSS最適化ツール
  • YUI Compressor JS : Yahoo!製のJavaScript最適化ツール

以下SCSSの設定画面です。
※RubyとSCSSは別途インストールが必要です。
20130422_img3
Programにコンパイルするツールのパスを指定してください。ツールによりますが、だいたい設定をいじらないままで問題なく使えました。各ツールのインストールに関しては、記事の内容と変わってしまいますのでフォローしません。すいません。。。

また、プロジェクト表示では、このようにまとめて表示してくれます。
20130422_img6

コンパイルする環境をWebStormにまとめてしまえるのは、とてもすっきりした制作環境を作れるので、個人的にはお気に入りです。是非試してみてください。
※ちなみに本日（2013/4/22）まで半額キャンペーン中です。

No related posts.