Visualstudio2015でフロント開発！

GruntJS, NPM, and Bower Support

asp.net5のwebアプリケーションは標準でnpm,Grunt,Gulp,Bowerなどのツールが使えるようになっています!!
さっそくフロントの開発ツールを使っていきましょう^^

※各ツールの詳細についてはここでは詳しく述べません。
私は、このあたりの記事がとても参考になりました。
ASP.NET 5 と Visual Studio 2015 では Bower と Grunt が標準になるみたいなので勉強してみた/しばやん雑記
 ASP.NET 5 について一部/miso_soup3 Blog

開発環境

Windows7 Professional
Visual Studio Community 2015
新規作成>プロジェクト>ASP.NETWebアプリケーション(C#)

下記のページを参考に設定を行いました。
ASP.NET 5 RC1 をインストールする
 ASP.NET 5＋AngularJSでトレンドなSPAアプリを開発しよう！

プロキシに阻まれる

だがしかし、npm/bowerはプロキシ環境下ではそのままでは使えませんでした…
インターネットオプション??環境変数のHTTP_PROXY??devenv.exe.config??と、いろいろ設定をいじってみましたが、最終的に成功したのは以下の方法でした。

node.jsをインストールする

gitをインストールする

それぞれプロキシ設定をする

VisualStudioの外部ツールの検索場所指定を1,2でインストールしたnpm,gitに指定する

プロジェクトの.bowerrcにプロキシ設定をする

ざっくりいうと、VisualStudio内蔵のnpm/gitは無視して別でインストールしたものにプロキシ設定をしてそっちを使用するようにしています。
内蔵のものを使う方法は力及ばずでわかりませんでした…

※もっとスマートなやり方がありましたらご教授くださいm(_ _)m!!

以下詳細に見ていきます。

1. node.jsをインストールする

node.jsをインストールしますが、正しくはnode.jsに付随しているnpmが目的です。
インストールすると、環境変数のPathにnpmが追加されるはずです。(あとで使います）

2. gitをインストールする

Bowerが、ライブラリをgithubから取得してくる場合があるのでgitも使えるようにしておきます。

3. それぞれプロキシ設定をする

インストールしたnpm/gitそれぞれにプロキシ設定を行います。

$ npm config set proxy http://proxy.example.com:8080
$ npm config set https-proxy http://proxy.example.com:8080

$ git config --global url."https://".insteadOf git://  ※gitアクセス時に強制的にhttpsにします
$ git config --global http.proxy http://proxy.example.com:8080
$ git config --global http.proxy http://proxy.example.com:8080

これでnpmとgitをプロキシ環境下で使う準備ができました。

4. VisualStudioの外部ツールの検索場所指定を1,2でインストールしたnpm,gitに指定する

[ツール＞オプション＞プロジェクトおよびソリューション＞外部webツール]で外部ツールを使用する際の検索先を以下のように変更します。

[$(PATH)]を一番上にする

[$(DevEnvDir)\Extensions\Microsoft\Web Tools\External\git]のチェックを外す

gitのパス(ex)[C:\Program Files (x86)\Git\bin])を追加してチェックを付ける

1.でVS内蔵のnpmからプロキシ設定をしたnpmを優先して使用するようにしています。
また、2.3.ではVS内蔵のgitを検索候補から外し、プロキシ設定をしたgitを追加しています。

5. プロジェクトの.bowerrcにプロキシ設定をする

最後に、プロジェクトにbower.jsonを追加したときに一緒に追加される.bowerrcを以下のように修正します。

//.bowerrc
{
  "directory": "wwwroot/lib",
  "proxy" : "http://proxy.example.com:8080",
  "https-proxy" : "http://proxy.example.com:8080"
}

これで完了です！

参考

proxy環境下でのnpm config設定
 bowerにプロキシの設定をする方法
 Visual Studio 2015 bower configuration & proxy settings?
VS 2015 + Bower: Does not work behind firewall
Visual Studio 2015 - Bower not working
Gulpfile.js failed to load in Task Runner Explorer(VS2015.1) #247

VSフロント開発と社内プロキシ設定(VisualStudio2015/ASP.NET5)