基于Visual Studio 2015,你可以:

  • 方便的管理前端包,如jQuery, Bootstrap, 或Angular。
  • 自动运行任务,如LESS、JavaScript压缩、JSLint、JavaScript单元测试等。
  • 方便的获得Web开发者生态圈的工具包。

为了实现这些场景,Visual Studio 2015已经内置了一些流行的第三方工具包:

  • Bower:Web包管理器,Bower可以帮你安装前端包,包括JavaScript、CSS类库。对于服务器端包,请通过NuGet包管理。
  • Grunt and Gulp:Grunt和Gulp是基于JavaScript的运行任务。如你未用过类似功能,可以认为这是一个自动调度运行的app,ASP.NET 5工程模板使用的是Grunt运行任务。
  • npm (Node Package Manager). npm是一个node包管理器,最初被用于Node.js包管理。上面说的Bower、Grunt、Gulp用到了npm。

启动Visual Studio 2015,新建一个ASP.NET 5.0的工程,选择文件-> 新建工程->Visual C#->Web->ASP.NET Web应用程序:

在新建工程对话框,选择ASP.NET 5.0 Starter Web

创建一个ASP.NET MVC 6 app,工程文件结构如下:

该工程下,包括如下重要的配置文件:

  • Project.json. 主工程文件,NuGet 包依赖清单.
  • package.json. npm包清单.
  • bower.json. Bower包清单.
  • gruntfile.js. 配置Grunt任务.

静态文件和wwwroot

wwwroot 文件夹在ASP.NET 5.0中是新增的,工程中所有的静态文件存放于此。且客户端可直接访问这些文件,包括HTML文件、CSS文件、Images文件、JavaScript文件。wwwroot文件夹是网站的根目录,如这个域名http://hostname/指向wwwroot文件夹。

代码应该存放在wwwroot外,包括C#文件、Razor文件,既wwwroot文件夹用于实现代码文件、静态文件的隔离。

  • 编译CoffeeScript or TypeScript 文件为JavaScript.
  • 编译LESS or Sass 文件为CSS.
  • 压缩JavaScript.
  • 优化image文件.

以上的操作会把wwwroot文件夹外的代码文件进行编译,然后拷贝到wwwroot文件夹下,这样前端即可访问。可通过任务调度自动执行这些步骤。

{
"webroot": "wwwroot",
"version": "1.0.0-*",
// ...
}

使用Bower来进行前端包管理

下面我们看看如何在Visual Studio 2015 中使用Bower进行前端包管理,在本节中,我们天津RequireJs类库给app。

打开bower.json,在dependencies节添加requirejs入口。

"dependencies": {
"bootstrap": "~3.0.0",
"jquery": "~1.10.2",
"jquery-validation": "~1.11.1",
"jquery-validation-unobtrusive": "~3.2.2",
"requirejs": "^2.1"
},

备注:bower版本语法模式是”major.minor.patch”. 在^2.1中,字符'^’指定最小版本号。'~1.10.2' 用于指定最小为1.10.2版本,或者任何1.10的最新补丁。 更多细节,请查看Github:https://github.com/npm/node-semver.

在Visual Studio 2015下,可使用智能感知获得可用包的列表:

也可以获得包版本号的智能提示

现在安装最新包,在解决方案视图,点击Dependencies,然后在Bower文件夹上右击单击Restore Packages.

可通过Output 窗体查看安装的细节。 包被安装到bower_components文件夹。

Visual Studio会自动加载对应版本的包在您的解决方案中。这样包文件就不用上传到源码管理下。

使用Grunt运行任务调度

使用gruntfile.js 文件来定义Grunt任务,默认的工程模板包括了这样的任务,如Bower包管理器。

下面我们使用Grunt来添加LESS处理、编译过程。

在工程下,创建一个文件夹assets。

在assets文件夹上右键,选择Add > New Item. 在新建项对话框中,选择LESS Style Sheet文件,命名为“site.less”.

粘贴如下代码到site.less文件

@base: teal;
body {
background-color: @base;
}

使用@base 变量用于定义颜色值,这个变量被用于LESS的特性。

  • 安装task,创建一个Grunt task或者复用一个存在的.
  • 在Grunt文件中配置task.
  • 绑定task到Visual Studio编译任务中

在package.json文件中,配置grunt-contrib库。

{
"version": "0.0.0",
"name": "MyApp",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-bower-task": "^0.4.0",
// Add this:
"grunt-contrib-less": "^0.12.0"
}
}

在输入的时候,同样会看到可用包列表:

同样可智能感知出版本号:

在解决方案,点击Dependencies > NPM,你可以看到grunt-contrib-less已经被列出来,但是目前尚未安装。

点击右键,Restore Packages。

安装完成的gruntfile.js 文件如下所示:

module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: true
}
}
},
// Add this JSON object:
less: {
development: {
options: {
paths: ["Assets"],
},
files: { "wwwroot/css/site.css": "assets/site.less" }
},
}
}); grunt.registerTask("default", ["bower:install"]); grunt.loadNpmTasks("grunt-bower-task");
// Add this line:
grunt.loadNpmTasks("grunt-contrib-less");
};

initConfig方法

使用initConfig方法来配置Grunt任务。每个Grunt插件有他自己的配置项集合。如,我们可以配置grunt-contrib-less编译为assets/site.less文件,然后拷贝到wwwroot/css/site.css.

loadNpmTasks方法

从Grunt插件中加载任务,工程模板默认通过这个来加载grunt-bower-task。下面添加一个grunt-contrib-less。

在解决方案视图,选择gruntfile.js  右键Task Runner Explorer

通过选择任务名称“less”,点击Run运行:

output窗口运行如下:

打开/wwwroot/css/site.css文件,可看到编译后的CSS文件如下:

body {
background-color: #008080;
}

运行程序,背景色已经被真实颜色修改了:

配置自动运行:通过Bindings > After Build 即可配置自动运行。

理解了本节在Visual Studio 2015中使用Grunt、Bower开发Web程序的内容,能帮助大家更好的进行开发过程。那么在开发过程中,有哪些开发工具可以利用?ComponentOne Studio for ASP.NET 是ASP.NET平台上的一整套完备的开发工具包,包含的Web窗体控件、MVC scaffolding模板以及HTML5/JavaScript页面组件,仅通过几行代码就可以在系统中实现丰富的功能。

原文链接:Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序的更多相关文章

  1. 在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

    在 Visual Studio 2015 中提供了对于 Grunt 和 Gulp 的内置支持,在 Visual Studio 2013 中怎么办呢?微软将 2015 中的特性作为几个独立的扩展发布出来 ...

  2. 在Visual Studio 2015 中添加SharePoint 2016 开发模板

    前言 SharePoint 2016已经发布很久了,然而,默认安装VS2015以后,却没有SharePoint 2016的开发模板.其实问题很简单,和VS2012开发SharePoint 2013一样 ...

  3. Visual Studio 2015中使用gdb远程调试linux程序

    VS的debug功能非常强大,相比而言linux上的图形化调试一直不是很好用. 如果可以使用VS来调试linux程序,应该是一件比较愉快的事情. 这在2015中变得可能,因为从2015开始VS支持An ...

  4. Xamarin.Forms教程下载安装Visual Studio 2015

    Xamarin.Forms教程下载安装Visual Studio 2015 下载安装Visual Studio 2015 Visual Studio 2015是微软提供的IDE,其中集成了Window ...

  5. ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grun ...

  6. [.net 面向对象程序设计进阶] (27) 团队开发利器(六)分布式版本控制系统Git——在Visual Studio 2015中使用Git

    [.net 面向对象程序设计进阶] (26) 团队开发利器(六)分布式版本控制系统Git——在Visual Studio 2015中使用Git 本篇导读: 接上两篇,继续Git之旅 分布式版本控制系统 ...

  7. Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一)

    基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于Visual Studio 安装 Xamarin 扩展的跨Android.iOS 和 Windows的 ...

  8. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  9. Visual Studio 2015 和 Apache Cordova 跨平台开发入门

    原文:Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一) 基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于V ...

随机推荐

  1. iphone中button按钮显示为圆形解决

    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...

  2. WinForm开发之取送货管理1

    一.取送货管理项目需求 该系统的业务背景如下:客户是一个针织半成品生产加工作坊,有很多生产加工人员从客户工厂那里取走半成品,加工成成品后送回来.客户根据加工每种半成品的加工单价和完成数量,付费用给生产 ...

  3. 【转】Crontab定时任务配置

    原文出处:http://www.cnblogs.com/kerrycode/p/3238346.html CRONTAB概念/介绍 crontab命令用于设置周期性被执行的指令.该命令从标准输入设备读 ...

  4. 脉冲计数功能在ESM335x-Linux主板上的实现

    1.综述 在工业控制中,经常需要获取脉冲信号计数值.频率.周期.占空比等参数.英创嵌入式主板ESM335X系列 Linux系统现已实现外部输入脉冲信号的计数.频率.周期.占空比测量功能. 主要功能及技 ...

  5. QQ屠龙转世-挖矿

    ※◆☆★☆◆※欢迎使用QQ屠龙转世辅助,如有疑问请联系作者QQ:82850696*2*测试版已停用*1*2014-8-27 14:05:59*哈密*E2873D0137C6D04F42E088AA46 ...

  6. vim c++补全

    弄了个vim对c++的补全,主要参考自: http://vim.wikia.com/wiki/C%2B%2B_code_completion   首先确定vim编辑.cc或者.cpp文件时当前自动补全 ...

  7. jquery之右下角消息提示框

    messager.js (function (jQuery) { var window; var obj = new Object(); obj.version = '@1.0'; obj.title ...

  8. kettle(6.0)如何连接远程集群(CDH5.1)?

    最近因为公司业务需要,刚刚接触了kettle.这不看不知道,一看才发现kettle的功能是在是太强大了,让我有种相见恨晚的感觉.由于主要是应用kettle与hadoop集群和hive连接进行数据处理. ...

  9. CRC 冗余校验计算

    (1)设G(x)为r阶,则在信息位末尾加r个0形成新信息 r=原信息位数 - 1

  10. NPOI创建DOCX常用操作【转】

    1.  创建文档 XWPFDocument m_Docx = new XWPFDocument();2.  页面设置 //1‘=1440twip=25.4mm=72pt(磅point)=96px(像素 ...