ASP.NET vNext总结:Bower
1.前言
如果VS自称IDE界第二,其它IDE不敢称第一了。牛得不得了,它有任性的资本。VS2015又有哪些突破呢?目前正式版并没有发布,但大的方向和思想基本上已经确定了。比如集成开发谷歌Android和苹果IOS等,这里就不讨论这些了。如题,我们来了解一下Bower(属于NPM技术)在ASP.NET vNext中使用。
2.概述
说到Bower不得不提NPM。如果你想深入了解NPM技术,请登录:https://www.npmjs.com ,我可不敢班门弄斧了。
Bower:web包配置管理工具,允许您下载(从github网站)和安装或还原软件包,一般处理是 JavaScript 和 CSS 库等静态文件。
注:对于静态文件或DLL安装包,仍可以使用 NuGet 程序包管理器。其实我还是觉得NuGet更好用些。但微软为了接轨更多的托管源码平台,而NPM技术应用很广泛,所以VS2015既然要造最强的IDE,集成Bower等工具也不意外。
3.创建项目及目录说明
3.1项目创建
为了介绍和演示,打开上一章的vNext解决方案,右键“添加”-》新建项目-》模板-》Visual C#-》Web:ASP.NET Web应用程序-》ASP.NET 5 Starter Web。 项目”名称“:vNext.WebStarterTemplate。(注: 你也可以使用Empty空模板来创建项目,然后添加相应的bower.json等文件。但这里使用Starter Web模板,帮我们添加过了。)
等待References文件夹会Restoring一段时间(视你访问github下载文件的速度。有时比较慢!),完成后,把该项目设为“项目启动项”。
3.2目录说明
wwwroot:静态文件使用的文件夹。包括 HTML 文件、 CSS 文件、 图像文件和 JavaScript 文件等。
Project.json:项目配置文件。列出了 NuGet 包的依赖项等工具使用配置。
package.json:列出 npm 软件包。
bower.json:列出bower软件包。
gruntfile.js:配置的grunt任务。
config.json:配置EF和数据库连接字符串设置。
3.3卸载删除
为了演示bower使用,这里全部卸载bower.json配置及删除安装过的包。
bower.json代码如下:
注:卸载过程就不用说啦!
lib文件下全删除:
4.bower下载安装包
4.1配置bower.json
打开bower.json,添加下面代码(版本选择前,等待Loading后会出现):
注:”^“表示如2.x.x,也就是主版本2已定,次版本x和小版本x未定可升级;”~“表示如2.1.x,主次版本2.1已定,小版本x未定可升级。
选择版本后,保存bower.json文件后,再看目录,会出现(没有安装):
4.1下载
在bower.json中的jquery项,点击Install Package:
安装过程中,可以查看VS"输出“窗口:
OK,表示已经下载bower_comonents文件夹中了。让解决方案管理器”显示所有文件“:
看到bower的jquery已经没有”未安装“了,但并没有把dist下的js文件添加到lib文件下下。
5.安装安装包
5.1配置bower.json
5.2打开task Explorer
右键gruntfile.js文件:
注:如果没有看到Task……项,可以从vs的”视图“-》”其它窗口“找到。右键”install"项-》Run:
注:如果没有install项,刷新一下。
嘎嘎! 没有错误,表示ok。
再查看结果:
OK,复制成功。呵呵,如果没有,你会觉得什么问题呢?请你注意你是要从bower_comonents复制的文件路径和bower.json中”exportsOverride“对应上。
6.完整安装
6.1配置bower.json
{ "name": "vNext.WebStarterTemplate", "private": true, "dependencies": { "jquery": "^2.1.3", "bootstrap": "^3.3.1", "jquery-validation": "^1.13.1", "jquery-validation-unobtrusive": "^3.2.2" }, "exportsOverride": { "jquery": { "": "dist/*.*" }, "bootstrap": { "js": "dist/js/bootstrap.{js,min.js}", "css": "dist/css/*.*", "fonts": "dist/fonts/*.*" }, "jquery-validation": { "": "dist/jquery.validate.{js,min.js}" }, "jquery-validation-unobtrusive": { "": "jquery.validate.unobtrusive.{js,min.js}" } } }
6.2全部安装结果
6.3运行程序
注:先修改一下Views\Shared\_Layout.cshtml的jquery.js引入路径。
ok,说明样式和js引用正确。
7.小结
本章内容还是比较简单,无非如何安装静态文件安装包。关于gruntfile.js配置情况,下一章介绍Grunt知识再补充。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。