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知识再补充。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。