miso_soup3 Blog

主に ASP.NET 関連について書いています。

VS2015 拡張機能による JS/CSS/LESS 等の Bundle, Minify, Compile について

Visual Studio Web

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）

理由は参照記事にも載っていますが、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」もダウンロードします。

f:id:miso_soup3:20150824215619p:plain

Visual Studio を再起動後、「ファイル」＞「Web サイト」で「ASP.NET 空の Web サイト」を選択します。（HTMLやCSSファイルを用意したいだけなので、他のプロジェクトでもOK）

「ソリューションエクスプローラー」を開き、「追加」＞「新しい項目の追加」から、適当に「JavaScriptファイル」を2つ、「LESS スタイルシート」を1つ、「HTMLページ」を1つ追加します。名前はなんでもいいです。

f:id:miso_soup3:20150824215638p:plain
f:id:miso_soup3:20150824215631p:plain

JavaScript ファイルにそれぞれ適当なコードを書きます。

f:id:miso_soup3:20150824215644p:plain

追加した「JavaSciprt ファイル」を2つ選択し、右クリック、「Create bundle…」をクリックします

f:id:miso_soup3:20150824215653p:plain

ダイアログがでてくるので、そのまま「保存」をクリック。
すると、ソリューションエクスプローラーに、「bundle.js」「bundle.min.js」「bundleconfig.json」が下のように追加されます。

f:id:miso_soup3:20150824215659p:plain

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>

メニューから、「デバッグ」＞「デバッグの開始」で実行してみると、メッセージが表示されます。

f:id:miso_soup3:20150824215708p:plain

今回は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」をクリックします。

f:id:miso_soup3:20150824215723p:plain

LESSファイルを再保存してみます。すると、「compilerconfig.json」、「StyleSheet.css」「StyleSheet.min.css」が生成されています。

f:id:miso_soup3:20150824215729p:plain

先ほどと同じように、「HtmlPage.html」にて読み込んでみます。
こういうときはスーっとドラッグするのが良いです。

f:id:miso_soup3:20150824215735p:plain

「デバッグ」＞「デバッグ開始」で確認してみると、背景が灰色になっているはずです。

f:id:miso_soup3:20150824215744p:plain
古めかしい。

タスクランナーエクスプローラーからは、ビルド前後の設定が可能です。

f:id:miso_soup3:20150824215759p:plain

ここに書いたのは一部の機能で、各拡張機能のページよりいろいろ確認できます。
ファイルが沢山できて煩わしい場合は、フォルダでまとめたり「File Nesting」で整理すると良いと思います。

Web Extension Pack

2016/1/4 追記

Web Extension Pack という Visual Studio 2015 の Web 開発用の拡張機能をセットでインストールするものがあります。
https://twitter.com/mkristensen/status/661630402323353600