在ASP.NET 5中如何方便的添加前端库
2015-05-30 23:15
579 查看
(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)
题记:ASP.NET 5和之前的ASP.NET版本有很大的不同,其中之一就是对前端库的管理不再使用Nuget,而是使用业界常用的做法——依赖Bower来管理。那么如何方便的添加前端库呢,今天就简单分享一下我的心得。
要通过Bower来添加前端库(以之前文章介绍过的MetroUI安装为例),打开项目下面的bower.json文件,在“dependencies”里面,添加一行描述:"metro": "3.0.5"。在输入包名的时候,VS会通过智能感知给出提示,包括版本号的选择也会给出。最终代码如下:
添加这行后,保存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。具体看如下代码:
完善Gulp任务代码后,还需要执行copy任务,来把metro的发布文件复制到wwwroot下面的具体文件夹下面(在本例中是lib)。执行Gulp任务可以在“Task Runner Explorer”中手动执行,也可以编译解决方案或项目来自动执行。
最后,完成前端库的安装后,就是在HTML或视图文件中引用,具体写法我就不重复了。
应该说,VS 2015和ASP.NET 5的前端开发模式,既保持了现在业界流行的常规做法,又充分发挥了Visual Studio的强大IDE功能,让大家添加前端库变得轻而易举。
题记: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}" }
完善Gulp任务代码后,还需要执行copy任务,来把metro的发布文件复制到wwwroot下面的具体文件夹下面(在本例中是lib)。执行Gulp任务可以在“Task Runner Explorer”中手动执行,也可以编译解决方案或项目来自动执行。
最后,完成前端库的安装后,就是在HTML或视图文件中引用,具体写法我就不重复了。
应该说,VS 2015和ASP.NET 5的前端开发模式,既保持了现在业界流行的常规做法,又充分发挥了Visual Studio的强大IDE功能,让大家添加前端库变得轻而易举。
相关文章推荐
- Raspberry Pi-2 启动自动挂载USB设备
- 【java web】--以终为始,Asp.Net
- 性能测试类,让你写法代码养成经常测试的好习惯 -ASP.NET C#
- Asp.Net北大青鸟总结(三)-应用程序状态管理
- 35美元最小电脑树莓派windows10初体验 raspberry pi 2 win10
- Asp.Net北大青鸟总结(二)-asp.net控件技术
- ASP.NET MVC 必备开发环境
- C# ASP.NET 按比例缩小代码(基础版)
- 学习ASP.NET MVC5框架揭秘笔记-ASP.NET MVC路由(一)
- ASP.NET MVC中如何使用PartialView
- ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
- C#ASP.NET 通用扩展函数之 IsWhat 简单好用
- 重温ASP.NET内置对象之Request
- 【ASP.NET北大青鸟】--添加广告控件
- 用正则表达式在注册页面(js/aspx.cs)的验证
- [Asp.net 5] Localization-resx资源文件的管理
- asp.net文件下载
- ASP.NET Ajax client-side framework failed to load OR ‘Sys’ is undefined(ASP.NET Ajax 客户端框架未能加载)
- jasperserver 创建带查询的报表
- 资源链接