Asp.net vNext 学习3
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的更多相关文章
- Asp.net vNext 学习1
Asp.net vNext 学习之路(一) 概述 asp.net vNext 也叫 asp.net 5.0,意思是微软推出的下一个版本的asp.net.可以说是微软对asp.net的一个比较重大的重新 ...
- [整理]ASP.NET vNext学习资源
http://www.hanselman.com/blog/IntroducingASPNETVNext.aspx http://blogs.msdn.com/b/dotnet/archive/201 ...
- Asp.net vNext 学习之路(三)
asp.net vNext 对于构建asp.net 程序带来了一些重大的改变,让我们开发asp.net 程序的时候更加的方便和高效. 1,可以很容易的去管理客户端的包比如jquery,bootstra ...
- Asp.net vNext 学习之路(二)
View component(视图组件)应该是MVC6 新加的一个东西,类似于分部视图.本文将演示在mvc 6中 怎么添加视图组件以及怎么在视图中注入一个服务. 本文包括以下内容: 1,创建一个新的a ...
- Asp.net vNext 学习之路(一)
概述 asp.net vNext 也叫 asp.net 5.0,意思是微软推出的下一个版本的asp.net.可以说是微软对asp.net的一个比较重大的重新设计, asp.net vNext是一 个比 ...
- Asp.net vNext 2
Asp.net vNext 学习之路(二) View component(视图组件)应该是MVC6 新加的一个东西,类似于分部视图.本文将演示在mvc 6中 怎么添加视图组件以及怎么在视图中注入一个服 ...
- POCO Controller 你这么厉害,ASP.NET vNext 知道吗?
写在前面 阅读目录: POCO 是什么? 为什么会有 POJO? POJO 的意义 POJO 与 PO.VO 的区别 POJO 的扩展 POCO VS DTO Controller 是什么? 关于 P ...
- 分享我对 ASP.NET vNext 的一些感受,也许多年回过头看 So Easy!
写在前面 阅读目录: Visual Studio "14" CTP 关于 ASP.NET vNext ASP.NET vNext 实践 后记 ASP.NET vNext 发布已经过 ...
- 振奋人心啊!!!!下一代.NET——ASP.NET vNext
这两天看到的.NET的新闻都好振奋人心啊!微软北美技术大会带来了好多好消息! 看到一篇博客园的文章,感觉太棒了.摘录下来.原文链接:http://news.cnblogs.com/n/208133/ ...
随机推荐
- RH133读书笔记(10)-Lab 10 Exploring Virtualization
Lab 10 Exploring Virtualization Goal: To explore the Xen virtualization environment and the creation ...
- Team Services and Team Foundation Server官方资料入口
Team Foundation Server msdn 中文文档入口 Team Services or Team Foundation Server www.visualstudio.com 英文文档 ...
- MyEclipse调整项目的顺序
MyEclipse该项目是按照字母顺序排列的项目名称,无法调整. 例,我现在做Photo工程项目,向下位置,非常不方便: 可是,它有一个将项目分组的功能"Working Sets" ...
- 《Swift程序设计语言》中国翻译和学习笔记page23
·<The Swift Programming Language>中文翻译及读书笔记,附件中为英文原版教程 因21页之前内容和技术关系不大,不做翻译整理,从第21页開始 · 页 1 本页主 ...
- android代码签名和混乱的包装
研究了一下android的apk困惑签名和代码包装,假设没有混乱包.然后apk人们可以直接查看源代码反编译出来,尽管混乱包或能看懂.但不是那么容易理解,要求在至少一些时间 假设不混淆,反编译后的代码例 ...
- VB6基本数据库应用(五):数据的查找与筛选
同系列的第五篇,上一篇在:http://blog.csdn.net/jiluoxingren/article/details/9633139 数据的查找与筛选 第4篇发布到现在已经过了4天,很抱歉,学 ...
- NSIS常用代码整理
原文 NSIS常用代码整理 这是一些常用的NSIS代码,少轻狂特意整理出来,方便大家随时查看使用.不定期更新哦~~~ 1 ;获取操作系统盘符 2 ReadEnvStr $R0 SYSTEMDRIVE ...
- Android开发人员官方站点文档 - 国内踏得网镜像
Android Developer 安卓开发人员官方站点无法正常訪问.即使FQ因为网络原因依旧訪问缓慢. 故整理相关字体.脚本.样式.页面资源,在踏得网server上建立了本地镜像.初始镜像时间201 ...
- Html.Partial和Html. RenderPartial
圣殿骑士-蓝剑行动 Html.Partial和Html. RenderPartial用法 Html.Partial和Html. RenderPartial用法 Html.partial和RenderP ...
- java.util.Timer demo good
package timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; import org ...