VS2015 拡張機能による JS/CSS/LESS 等の Bundle, Minify, Compile について
Web Essentials 2013(+ Visual Studio 2013)で可能だった、JavaSciprt/CSSのMinifyやLESS等のコンパイルの機能は、Web Essentials 2015(+Visual Studio 2015)には含まれておらず、それぞれ別の拡張機能として独立したようです。
(参照:Bundling, minification and client-side compilation/June 8. 2015)
- JavaSciprt/CSS/HTML の Bundle & Minify
- LESS/SASS/CoffeScript のコンパイル
- → Web Compiler へ
理由は参照記事にも載っていますが、Web Essentials の肥大化を辞めたい、小さくしてコミュニティによるコントリビュートを多くしたい、ためのようです。拡張機能のインストール数が多くなるのでやや面倒ですが、それぞれGitHub上で pull requests を受け付けてますし、Visual Studio 2015 からの機能―タスクランナーエクスプローラーにより、ビルド後の設定など柔軟に操作できるようになった気がします。
Visual Studio 2015 ではこの拡張機能による方法の他に、npm, Grunt 等の方法がサポートされています。
以降は、npm, Grunt ではなく、この独立した拡張機能のチュートリアルを記載します。
目次
用語確認
- Bundle
- 複数のファイルを1つにして、HTTPリクエストの回数を削減する。
- Minify
- 改行や空白を削除して、ファイルのサイズを小さくする。
- コンパイル
- とある記法でかかれたコードを解析して、とある形式のコードに変換すること。ここでは、"LESSをCSSへ変換する"、"SASSをCSSへ変換する"、"CoffeeScriptをJavaScriptへ変換する"こと。
Bundler & Minifier
Visual Studio 2015 の「ツール」>「拡張機能と更新プログラム」で、左側の「オンライン」を選択し、右上にある検索欄に「Bundle Minifier」を入力して、ダウンロードします。同じように「Web Compiler」もダウンロードします。
Visual Studio を再起動後、「ファイル」>「Web サイト」で「ASP.NET 空の Web サイト」を選択します。(HTMLやCSSファイルを用意したいだけなので、他のプロジェクトでもOK)
「ソリューションエクスプローラー」を開き、「追加」>「新しい項目の追加」から、適当に「JavaScriptファイル」を2つ、「LESS スタイルシート」を1つ、「HTMLページ」を1つ追加します。名前はなんでもいいです。
JavaScript ファイルにそれぞれ適当なコードを書きます。
追加した「JavaSciprt ファイル」を2つ選択し、右クリック、「Create bundle…」をクリックします
ダイアログがでてくるので、そのまま「保存」をクリック。
すると、ソリューションエクスプローラーに、「bundle.js」「bundle.min.js」「bundleconfig.json」が下のように追加されます。
1つのJavaScript ファイルを編集し、保存したタイミングで bundle.js, bundle.min.js が生成されるようになっています。
生成された「bundle.min.js」を早速読み込んでみます。「HtmlPage.html」を次のように書き換えます。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="bundle.min.js"></script> <script> document.open(); document.write(message1 + message2); document.close(); </script> </head> <body> </body> </html>
メニューから、「デバッグ」>「デバッグの開始」で実行してみると、メッセージが表示されます。
今回はBundleのついでにMinifyも行われましたが、単独のJavaSciprtファイルをMinifyすることもできます。細かな設定は「bundleconfig.json」にてですかね。
Web Compiler
次は、LESSファイルをコンパイルしてCSSファイルを生成します。
追加した LESSファイルに適当にLESS記法を記述します。
@my-favorite-color: #c0c0c0; body { background-color: @my-favorite-color; }
ソリューションエクスプローラにてLESSファイルを右クリックし、「Compile file」をクリックします。
LESSファイルを再保存してみます。すると、「compilerconfig.json」、「StyleSheet.css」「StyleSheet.min.css」が生成されています。
先ほどと同じように、「HtmlPage.html」にて読み込んでみます。
こういうときはスーっとドラッグするのが良いです。
「デバッグ」>「デバッグ開始」で確認してみると、背景が灰色になっているはずです。
古めかしい。
タスクランナーエクスプローラーからは、ビルド前後の設定が可能です。
ここに書いたのは一部の機能で、各拡張機能のページよりいろいろ確認できます。
ファイルが沢山できて煩わしい場合は、フォルダでまとめたり「File Nesting」で整理すると良いと思います。
Web Extension Pack
2016/1/4 追記
Web Extension Pack という Visual Studio 2015 の Web 開発用の拡張機能をセットでインストールするものがあります。
https://twitter.com/mkristensen/status/661630402323353600