LESS/Sass/CoffeeScriptのコンパイルを行う「Visual Studio」拡張機能「Web Compiler」

「Web Compiler」v1.3.144

　「Web Compiler」は、「Visual Studio」でLESS/Sass/CoffeeScriptのソースコードをコンパイルするための拡張機能。「Visual Studio 2015」に対応する拡張機能で、編集部にてWindows 8.1上の「Visual Studio Community 2015」で動作を確認した。“Visual Studio Gallery”から無償でダウンロードできる。

　本拡張機能を利用すると、LESS/SassのコードをCSSへ変換したり、CoffeeScriptのコードをJavaScriptへ変換することが可能。この機能はもともとWebアプリケーション開発に必要な機能を集めた拡張機能「Web Essentials」に含まれていたが、「Web Essentials」のソースコードが肥大化してしまったため、「Visual Studio 2015」向けの最新版「Web Essentials 2015」からLESS/Sass/CoffeeScriptのコンパイル機能だけが「Web Compiler」としてリリースされることになったようだ。

　これにより「Web Essentials」がクラッシュまたはハングアップしてしまっても、コンパイル機能はそのまま利用できるようになった。また、機能を細分化することにより、開発規模の大きな「Web Essentials」では取り入れることが難しかった、ちょっとしたフィードバックを反映させやすくなるのも利点だ。また、コンパイル機能だけがほしい開発者にとってもありがたい施策と言えるだろう。

　利用方法は簡単で、「Visual Studio」の“ソリューション エクスプローラー”でコンパイルしたいファイルを選択し、右クリックメニューから［Compile file］コマンドを選択するだけでよい。当該ファイルと同じフォルダーにコンパイルされたファイルが出力される。この際、“Minify（ソースコードの短縮・軽量化）”されたソースコードを同時に出力することも可能。一度コンパイルを行うと、ファイルが保存されるたびに自動でコンパイルが実行される。

右クリックメニューから［Compile file］コマンドを選択してコンパイル

当該ファイルと同じフォルダーにコンパイルされたファイルが出力。“Minify”も可能

“compilerconfig.json”を編集すればコンパイルオプションを設定することも

　さらに、コンパイル時にプロジェクトページのルートに追加されるJSON形式の設定ファイル“compilerconfig.json”を編集すれば、コンパイルオプションを設定することも可能。たとえば“Minify”を行うかどうかや、圧縮されたスクリプトのデバッグを容易にする“Source Maps”の出力を行うかどうかを制御することができる。