Asp.net vNext 学习之路(三)

asp.net vNext 对于构建asp.net 程序带来了一些重大的改变,让我们开发asp.net 程序的时候更加的方便和高效。

  • 1,可以很容易的去管理客户端的包比如jquery,bootstrap,angular。
  • 2,能够自动的完成less 的编译,javascript 的压缩和单元测试。
  • 3,在web 开发社区有非常丰富的工具生态系统。

vs 2015 中有一些自动化的编译工具来支持一些第三方的工具,

  • 1,Bower,可以看作是web 应用的包管理工具,bower 可以安装和恢复客户端的包,包括javascript 和css 的库。一些服务端的包比如像mvc 6 的 框架,我们可以用Nuget来管理。
  • 2,Grunt和Gulp, 这两个是基于javascript 的能够自动完成日常开发任务的工具,Asp.net vNext 工程模板就是用的Grunt。
  • 3 npm(Node Package Manager),npm 就是一个包管理工具,是用node.js 开发的,Bower ,Grunt,Gulp 都是用的npm。

首先新建一个ASP.NET 5.0 started web 程序,有如下的目录结构。其中:

  • 1,project.json,是项目的工程文件,Nuget依赖的包都会列在这。
  • 2,package.json,列出npm 的包。
  • 3,bower.json,列出bower 包。
  • 4,grunfile.json,配置grunt 任务。

接下来就说说这些:
1 静态文件(static files)和wwwroot
wwwwroot 是asp.net vNext 新添加的文件夹。包括程序的html 文件,css文件,图片以及js 文件,wwwroot 位于网站的根目录, 
http://localhost/ 就会指向它,静态文件的url 都是相对与这个文件夹的。代码文件应该放在wwwroot 文件夹之外,wwwroot 文件夹为代码文件和 
静态文件划分了清晰的界限。
一些静态文件需要通过编译预处理来创建:
1,CoffeeScript 或则 TypeScript去编译成javascript。
2,less或者sass文件编译成css 文件。
3,压缩和javascript 文件连接。
4,优化图片。
这些编译应该在wwwroot 文件夹之外处理的。在project.json文件中我们可以任意命名wwwroot 文件夹。

2通过Bower 来管理客户端的包

我们可以在bower.json 文件中添加require.js 在dependencies 区域:

1       "dependencies": {
2 "bootstrap": "~3.0.0",
3 "jquery": "~1.10.2",
4 "jquery-validation": "~1.11.1",
5 "jquery-validation-unobtrusive": "~3.2.2",
6 "requirejs": "^2.1"

添加的时候会有只能提示。右键点击bower再点击restore package 就可以在输出窗口 看到我们我们安装的包了。

vs 会自动的还原解决方案所有的包。因而,如果我们检查我们项目中的源代码的时候 ,可以排除bower_components 文件夹。

3 使用Grunt来运行任务

gruntfile.js 文件定义了Grunt 任务,项目的模板包括一个可以运行bower 管理工具 的任务。我们可以添加一个less 文件。首先创建一个assets文件

然后右键文件夹add>new items > 选择less style sheet 命名为site.less

代码是:

1 @base: red;  body {  background-color: @base; }

这段代码的意思是设置页面的背景颜色是红色。默认情况下vs 不会做任何的处理,那 么我们就需要添加grunt 任务,步骤是:

  • 1 安装这个任务,我们可以写一个grunt 任务。
  • 2 在grunt 文件中设置这个任务。
  • 3 在vs 编译的时候绑定这个任务。

我们可以在package.json 中去添加这个任务。在devDependencies 区域中

然后在gruntfile.js 文件中写下如下代码:

 1 module.exports = function (grunt) {
2 grunt.initConfig({
3 bower: {
4 install: {
5 options: {
6 targetDir: "wwwroot/lib",
7 layout: "byComponent",
8 cleanTargetDir: false
9 }
10 }
11 },
12 less: {
13 development: {
14 options: {
15 paths: ["Assets"],
16 },
17 files: { "wwwroot/css/site.css": "assets/site.less" }
18 },
19 }
20
21 });
22
23 // This command registers the default task which will install bower packages into wwwroot/lib
24 grunt.registerTask("default", ["bower:install"]);
25
26 // The following line loads the grunt plugins.
27 // This line needs to be at the end of this this file.
28 grunt.loadNpmTasks("grunt-bower-task");
29
30 grunt.loadNpmTasks("grunt-contrib-less");
31 };

接下来我们就可以运行这个任务了,右键 gruntfile.js 然后选择Task Runner  Exploer 我们可以看到:
   

点击less 任务 成功。

就可以看到/wwwroot/css/site.css 已经有less 编译的代码了:

页面效果:

好了,本文就到此为止。以后我还会分享关于Asp.net vNext 的有关知识。

Asp.net vNext 学习3的更多相关文章

  1. Asp.net vNext 学习1

    Asp.net vNext 学习之路(一) 概述 asp.net vNext 也叫 asp.net 5.0,意思是微软推出的下一个版本的asp.net.可以说是微软对asp.net的一个比较重大的重新 ...

  2. [整理]ASP.NET vNext学习资源

    http://www.hanselman.com/blog/IntroducingASPNETVNext.aspx http://blogs.msdn.com/b/dotnet/archive/201 ...

  3. Asp.net vNext 学习之路(三)

    asp.net vNext 对于构建asp.net 程序带来了一些重大的改变,让我们开发asp.net 程序的时候更加的方便和高效. 1,可以很容易的去管理客户端的包比如jquery,bootstra ...

  4. Asp.net vNext 学习之路(二)

    View component(视图组件)应该是MVC6 新加的一个东西,类似于分部视图.本文将演示在mvc 6中 怎么添加视图组件以及怎么在视图中注入一个服务. 本文包括以下内容: 1,创建一个新的a ...

  5. Asp.net vNext 学习之路(一)

    概述 asp.net vNext 也叫 asp.net 5.0,意思是微软推出的下一个版本的asp.net.可以说是微软对asp.net的一个比较重大的重新设计, asp.net vNext是一 个比 ...

  6. Asp.net vNext 2

    Asp.net vNext 学习之路(二) View component(视图组件)应该是MVC6 新加的一个东西,类似于分部视图.本文将演示在mvc 6中 怎么添加视图组件以及怎么在视图中注入一个服 ...

  7. POCO Controller 你这么厉害,ASP.NET vNext 知道吗?

    写在前面 阅读目录: POCO 是什么? 为什么会有 POJO? POJO 的意义 POJO 与 PO.VO 的区别 POJO 的扩展 POCO VS DTO Controller 是什么? 关于 P ...

  8. 分享我对 ASP.NET vNext 的一些感受,也许多年回过头看 So Easy!

    写在前面 阅读目录: Visual Studio "14" CTP 关于 ASP.NET vNext ASP.NET vNext 实践 后记 ASP.NET vNext 发布已经过 ...

  9. 振奋人心啊!!!!下一代.NET——ASP.NET vNext

    这两天看到的.NET的新闻都好振奋人心啊!微软北美技术大会带来了好多好消息! 看到一篇博客园的文章,感觉太棒了.摘录下来.原文链接:http://news.cnblogs.com/n/208133/ ...

随机推荐

  1. RH133读书笔记(10)-Lab 10 Exploring Virtualization

    Lab 10 Exploring Virtualization Goal: To explore the Xen virtualization environment and the creation ...

  2. Team Services and Team Foundation Server官方资料入口

    Team Foundation Server msdn 中文文档入口 Team Services or Team Foundation Server www.visualstudio.com 英文文档 ...

  3. MyEclipse调整项目的顺序

    MyEclipse该项目是按照字母顺序排列的项目名称,无法调整. 例,我现在做Photo工程项目,向下位置,非常不方便: 可是,它有一个将项目分组的功能"Working Sets" ...

  4. 《Swift程序设计语言》中国翻译和学习笔记page23

    ·<The Swift Programming Language>中文翻译及读书笔记,附件中为英文原版教程 因21页之前内容和技术关系不大,不做翻译整理,从第21页開始 · 页 1 本页主 ...

  5. android代码签名和混乱的包装

    研究了一下android的apk困惑签名和代码包装,假设没有混乱包.然后apk人们可以直接查看源代码反编译出来,尽管混乱包或能看懂.但不是那么容易理解,要求在至少一些时间 假设不混淆,反编译后的代码例 ...

  6. VB6基本数据库应用(五):数据的查找与筛选

    同系列的第五篇,上一篇在:http://blog.csdn.net/jiluoxingren/article/details/9633139 数据的查找与筛选 第4篇发布到现在已经过了4天,很抱歉,学 ...

  7. NSIS常用代码整理

    原文 NSIS常用代码整理 这是一些常用的NSIS代码,少轻狂特意整理出来,方便大家随时查看使用.不定期更新哦~~~ 1 ;获取操作系统盘符 2 ReadEnvStr $R0 SYSTEMDRIVE ...

  8. Android开发人员官方站点文档 - 国内踏得网镜像

    Android Developer 安卓开发人员官方站点无法正常訪问.即使FQ因为网络原因依旧訪问缓慢. 故整理相关字体.脚本.样式.页面资源,在踏得网server上建立了本地镜像.初始镜像时间201 ...

  9. Html.Partial和Html. RenderPartial

    圣殿骑士-蓝剑行动 Html.Partial和Html. RenderPartial用法 Html.Partial和Html. RenderPartial用法 Html.partial和RenderP ...

  10. java.util.Timer demo good

    package timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; import org ...