在asp.net 5中如何方便的添加前端庫

（此文章同時發表在本人微信公眾號“dotNET每日精華文章”，歡迎右邊二維碼來關注。)

題記：ASP.NET 5和之前的ASP.NET版本有很大的不同，其中之一就是對前端庫的管理不再使用Nuget，而是使用業界常用的做法——依賴Bower來管理。那么如何方便的添加前端庫呢，今天就簡單分享一下我的心得。

要通過Bower來添加前端庫（以之前文章介紹過的MetroUI安裝為例），打開項目下面的bower.json文件，在“dependencies”里面，添加一行描述："metro": "3.0.5"。在輸入包名的時候，VS會通過智能感知給出提示，包括版本號的選擇也會給出。最終代碼如下：

{  "name": "ASP.NET",  "
添加這行后，保存bower.json文件，VS就會自動去恢復MetroUI的包。展開項目中的“dependencies”節點下的“Bower”節點，就會看到“metro (3.0.5)”的節點。根據網絡情況和包大小，可能需要稍等一下，直到這個節點后面的“not installed”字樣消失，就說明包恢復成功了。如果自動恢復有問題，也可以點擊這個節點，從右鍵菜單中選擇“Update Package”。
安裝好的包，只是被下載到了項目文件夾中的“bower_components”文件夾中的相應文件夾。你還需要通過Gulp或者Grunt這樣的任務執行器把包的發布文件copy到lib目錄下（lib目錄是根據VS的習慣，你也可以選擇其他目錄）。由于VS默認項目模板使用的是Gulp，那么就打開gulpfile.js文件，找到“copy”這個task。在“bower”里面，添加copy描述。由于MetroUI的發布文件被放到了兩個文件夾下“build”和“fonts”下，所以編寫copy描述需要一點技巧來處理多個文件夾的copy。具體看如下代碼：
var bower = {    "bootstrap": "bootstrap/dist/**/*.{js,map,CSS,ttf,svg,woff,eot}",    "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",    "hammer.js": "hammer.js/hammer*.{js,map}",    "jquery": "jquery/jquery*.{js,map}",    "jquery-validation": "jquery-validation/jquery.validate.js",    "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",    "metro": "metro/build/**/*.{js,map,css}",    "metro/fonts": "metro/fonts/*.{ttf,svg,woff,eot}"  }
完善Gulp任務代碼后，還需要執行copy任務，來把metro的發布文件復制到wwwroot下面的具體文件夾下面（在本例中是lib）。執行Gulp任務可以在“Task Runner Explorer”中手動執行，也可以編譯解決方案或項目來自動執行。
最后，完成前端庫的安裝后，就是在HTML或視圖文件中引用，具體寫法我就不重復了。
應該說，VS 2015和ASP.NET 5的前端開發模式，既保持了現在業界流行的常規做法，又充分發揮了Visual Studio的強大IDE功能，讓大家添加前端庫變得輕而易舉。