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

要通过Bower添加前端库(以上文介绍的MetroUI的安装为例)，打开项目下的bower.json文件，在“依赖项”中添加一行描述:“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-obtructive”:“3 . 2 . 2”，“hammer . js”:“2 . 0 . 4”，“bootstrap-touch-carousel”:“0 . 8 . 0”，“0”

}

}

添加这一行后，保存bower.json文件，VS会自动恢复MetroUI的包。展开项目中“dependencies”节点下的“Bower”节点，您将看到“metro (3.0.5)”节点。根据网络情况和软件包大小，可能需要等待一段时间，直到此节点后面的“未安装”字样消失，表示软件包已成功恢复。如果自动恢复有问题，也可以点击这个节点，从右键菜单中选择“更新包”。

安装包只是下载到项目文件夹中“bower_components”文件夹的对应文件夹中。还需要通过Gulp或Grunt等任务执行器将包的发布文件复制到lib目录下(lib目录基于VS的习惯，也可以选择其他目录)。由于VS默认项目模板使用Gulp，所以打开gulpfile.js文件，找到任务“copy”。在“凉亭”中，添加一个副本描述。由于MetroUI的发布文件放在两个文件夹下，分别是“build”和“fonts”，所以写一个拷贝描述需要一点技巧来处理多个文件夹的拷贝。请参见以下代码:

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-obtrusted ":" jquery-validation-obtrusted/jquery . validate . obtrusted . js "、" metro": "metro/build/**/*。{js，map，css}，“metro/fonts”:“metro/fonts/*。{ttf，svg，woff，eot} "

}

在改进了Gulp任务代码之后，您还需要执行copy任务，将metro的发布文件复制到wwwroot下的特定文件夹中(在本例中是lib)。Gulp任务可以在任务运行器资源管理器中手动执行，也可以通过编译解决方案或项目自动执行。

最后，前端库安装后，在HTML或者视图文件中引用，具体的写法我就不重复了。

应该说VS 2015和ASP.NET 5的前端开发模式，既保留了现在业界流行的套路做法，又充分发挥了Visual Studio强大的IDE功能，方便大家添加前端库。