转载

在ASP.NET 5中如何方便的添加前端库

（此文章同时发表在本人微信公众号“dotNET每日精华文章”，欢迎右边二维码来关注。)

题记：ASP.NET 5和之前的ASP.NET版本有很大的不同，其中之一就是对前端库的管理不再使用Nuget，而是使用业界常用的做法——依赖Bower来管理。那么如何方便的添加前端库呢，今天就简单分享一下我的心得。

要通过Bower来添加前端库（以之前文章介绍过的MetroUI安装为例），打开项目下面的bower.json文件，在“dependencies”里面，添加一行描述："metro": "3.0.5"。在输入包名的时候，VS会通过智能感知给出提示，包括版本号的选择也会给出。最终代码如下：

{   "name": "ASP.NET",   "private": true,   "dependencies": {     "bootstrap": "3.3.4",     "jquery": "1.10.2",     "jquery-validation": "1.11.1",     "jquery-validation-unobtrusive": "3.2.2",     "hammer.js": "2.0.4",     "bootstrap-touch-carousel": "0.8.0",     "metro": "3.0.5"   } }

添加这行后，保存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}" }