読者です 読者をやめる 読者になる 読者になる

miso_soup3 Blog

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

Visual Studio 2013 で Bower を使う

Visual Studio 2013 で Grunt, Bower を使った運用ができるかなと思い試してみました。その手順を記載します。

参考サイトは 2015/1 に来日されるハンセルマンのブログから:Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

VS 2013 で Grunt, Bower を使ってる図
f:id:miso_soup3:20141126161154p:plain

所感
  • VS からできるといっても今のところは CUI に近い感じ。
  • 操作は VS 2015 の場合とほぼ同じ。
  • パッケージを取得だけではなく配置まで細かく設定できるのは便利そう。
  • Web Essentials と同じ匂いを感じます。(Mads Kristensen 氏が関係しているから?)

まずは

ASP.NET における Grunt, Bower の概要については、ASP.NET 5 と Visual Studio 2015 では Bower と Grunt が標準になるみたいなので勉強してみた - しばやん雑記 をご確認下さい。

インストール

下記の環境を用意します。

  • node.js
  • Visual Studio 2013 Update 4
    • 必須なのは Update 3 以上。

3 つの Visual Studio 拡張機能をインストールします。

コマンドプロンプトにて

コマンドプロンプトにて npm install grunt-cli -g を実行します。
参照(Task Runner Exporer の Prerequisites から

Visual Studio にて

例として ASP.NET MVC のプロジェクトで試してみます。Polymer のパッケージを取得し、その中から Polymer.js を「Content」フォルダ内に配置します。
(Polymer は Bower によるインストールを推奨しています。)

プロジェクトを作成した後、3 つのファイル―「package.json」「gruntfile.js」「bower.json」を root 直下に作成し、下記のようにコードを記述します。

f:id:miso_soup3:20141126161510p:plain

▼package.json(npm パッケージの定義)

{
    "version": "0.0.0",
	"name": "WebApplication97",
	"private": false,
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-bower-task": "~0.4.0"
    }
}

▼gruntfile.js(Grunt タスクを書く)

module.exports = function (grunt) {
	grunt.initConfig({
		bower: {
			install: {
				options: {
					targetDir: "Content ",
					layout: "byComponent",
					cleanTargetDir: false
				}
			}
		}
	});

	grunt.registerTask("default", ["bower:install"]);
	grunt.loadNpmTasks("grunt-bower-task");
}

targetDir には、インストールしたライブラリを配置したいフォルダを指定します。

▼bower.json(Bower のパッケージを定義)

{
	"name": "WebApplication97",
	"version": "0.0.0",
	"dependencies": {
		 "polymer": "Polymer/polymer#~0.5.1"
	},
	"exportsOverride": {
		"polymer": {
			"js": "polymer.js"
		}
	}
}

exportsOverride で指定したコンテンツが、「gruntfile.js」のtargetDirで指定したフォルダに配置されます。省略可です。この設定については後述。

Json スキーマ設定

Json を記述する際は、インテリセンスがあると便利です。bower.js と package.json にて、上のバーにて次の値を設定します。

↓ここに設定

f:id:miso_soup3:20141126161555p:plain

npm

「package.json」を右クリックし、「NPM install packages」をクリック。

f:id:miso_soup3:20141126161629p:plain

インストールが完了すると、出力ウィンドウに下のように表示され、ソリューション内に「node_modules」フォルダが作成されます。

f:id:miso_soup3:20141126161647p:plain

f:id:miso_soup3:20141126163215p:plain

Task Runner Explorer から Grunt のタスクを実行

Visual Studio のメニューから「表示」>「その他のウィンドウ」>「Task Runner Explorer」をクリックし、Task Runner Explorer を表示します。

図の赤枠にある更新ボタンをクリックします。

f:id:miso_soup3:20141126161658p:plain

すると gruntfile.js が読み込まれますので、図のように bower から「Run」をクリックします。

f:id:miso_soup3:20141126161713p:plain

インストールが完了すると、右側にログが表示されます。

f:id:miso_soup3:20141126161721p:plain

ソリューション内には、「bower_components」フォルダが作成されパッケージがインストールされています。ここで、「Content」と「boiwer_components」2つのフォルダを確認すると、双方に格納されているファイルが違うことがわかります。

f:id:miso_soup3:20141126161733p:plain

この挙動は、先ほど npm install した grunt-bower-task によるものです。このあたりのパッケージの配置の設定については、こちらの記事が参考になります。 bowerでインストールしたファイルの配置を設定するにはgrunt-bower-taskが便利

以上、手順でした。

package.json, bower.json ではインテリセンスが効きます。

f:id:miso_soup3:20141126161758p:plain

gruntfile.js の右クリックからの Run。

f:id:miso_soup3:20141126161817p:plain

bower.json の右クリックからの Run。(この場合、grunt-bower-task は影響しないと思われる。)

f:id:miso_soup3:20141126161824p:plain

もし何かエラーがおきた場合は、次の項目が参考になるかもしれません。必須かどうかは確認できず。

  • PATH環境変数に「git」が登録してあるか
  • node.js のバージョンが 0.10.22 以上であるか
  • bower.json ファイルのエンコード指定
    • bower.json を開く -> VS の「ファイル」>「名前を付けて bower.json を保存」>「エンコード付きで保存」Shift JIS