使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目

Grunt 简介
Grunt是一款基于js和node.js的构建工具,由于这段时间node.js越来越火爆,grunt拥有丰富的开源社区支持,产生了很多插件。还有一些插件散落在node社区。构建是一个和宽泛的表述,传统理解就是编译、打包、复制,而今,随着技术越来越丰富,构建还包括对前端组件的预处理,比如sass、less预处理成css,css和js的压缩和合并。grunt的插件可以很好的支持这些新的构建概念,而且更为适合用开源技术堆砌的项目。 虽然Grunt更多的用于程序构建,但是本质上Grunt是一个用来解决重复劳动的任务运行工具。

Grunt入门
安装
下载安装Node.js。下载地址

检查安装和查看版本:

node -v
v0.10.25

安装grunt命令行工具grunt-cli,使用-g全局安装,这样可以在任何一个目录里使用了。下面这条命令会把 grunt 加入你的系统搜索路径中,所以在任何目录下都可以使用此命令。

npm install -g grunt-cli

需要注意的是在linux或mac下有时会报没有权限的错误,这时须在前面加一个sudo

sudo npm install grunt-cli -g

查看版本:

grunt –version
grunt-cli v0.1.13

卸载。如果你在之前安装过全局的 Grunt,那么先删除它。

npm uninstall -g grunt

grunt-cli只是一个grunt的命令行界面,需要使用grunt及其插件,必须在项目的路径(通常是项目根目录下)下安装grunt模块本身即需要插件模块。每当grunt命令被执行时,它会通过nodejs的require命令在本地寻找已经安装的grunt。正因为如此,你可以在任何子目录下运行grunt命令。 如果cli找到了一个本地安装的grunt,它会加载这个 grunt 库,然后应用你在 GruntFile 中写好的配置, 然后执行相应的任务。

配置文件
package.json
package.json用来保存当前目录下所安装和需要的node模块有哪些,例如:

{
 "name": "my-project-name",
 "version": "0.1.0",
 "author": "Your Name",

 "devDependencies": {
 "grunt": "~0.4.1"
 }
}

可以手动创建这个文件,或者通过npm init命令,并按照提示完成package.json文件的创建。如果手动创建了package.json,只需通过npm install来下载和安装所需的模块。模块安装时,会保存在node_modules目录中。

如果想要在之后添加所需模块,使用下面这个命令,可以使得package.json文件得到同步更新

npm install <module> --save-dev

Gruntfile.js
这个文件的地位就像Makefile一样,是一个指导grunt进行任务的文件,其中需要配置各个插件模块所需的参数,以及加载插件,并定义任务。更多关于Gruntfile可以参考这里。建议读者对Gruntfile有个整体的理解再继续。

使用Grunt构建ASP.NET MVC
MSbuild
在使用grunt来构建.NET项目之前,必须先了解MSbuild。MSBuild是微软的用来构建程序的工具,目前VisualStudio已经全面使用MSbuild编译项目了。MSbuild由一个msbuild工具、一组编译或构建器程序和xml文件组成。实际上VisualStudio中的.sln和.csproj等项目文件就是一个msbuild能够认识的xml(下面称为msbuild配置文件),VisualStudio通过调用msbuild,由msbuild识别其中的参数和构建行为标识来完成构建工作。我们也可以自己通过命令行自己来调用msbuild。

在msbuild中有两个关键的概念:Task和Property。Task是msbuild能够直接作为目标来执行的入口,在执行msbuild的时候要么指向默认的Task,否则必须指定目标Task是什么。Property就是变量,就像程序中的变量可以影响程序执行一样,Property可以影响构建的行为。

VisualStudio产生msbuild配置文件其实非常复杂,表面上看只有没有多上行,但是它通过import,将一些预定义的配置文件导入到当前文件,使得无法全面的查看完整的配置文件,以至于无法找到关键的Task项。好在有一个工具可以用来帮助分析msbuild配置文件的结构。

另外,在调用msbuild的时候,可以通过命令行参数来覆盖默认的属性和任务,比如下面的调用表示,以”Rebuild”这个Task作为目标,并将Configuration属性设置为Debug:

msbuild ConsoleApplication1.csproj /target:Rebuild /property:Configuration=Debug

更多关于msbuild,请参考微软的文档

手动使用msbuild代替VisualStudio
以发布到本机为例,经过笔者在VS2012下的环境中测试,使用VS在调用msbuild时使用了如下关键的参数覆盖:

  • Configuration:Debug或者Release,相信使用VS的同学对此不会陌生
  • VisualStudioVersion:VS在安装的时候会将一些公用的,VisualStudio相关的,msbuild配置文件预先存在某个版本相关的地方,在VisualStudio生成项目文件时,会包含一个$VisualStudioVersion变量,这个变量会与路径结合指向这些预先准备好的配置文件。在2012下,需要将这个值设置为11.0
  • WarningLevel:编译时的告警级别
  • DeleteExistingFiles:发布功能使用到的是否删除已存在文件的选项
  • WebPublishMethod:发布方式,笔者常用的是FileSystem,即发布到本机或远程共享的某个目录
  • publishUrl:如果WebPublishMethod是FileSystem,这个值表示发布的磁盘路径

关键的任务:

  • Build:即VS中针对某个项目的编译功能
  • Rebuild:即VS中针对某个项目的重新编译功能
  • WebPublish:即VS针对某个项目的发布功能

至此,我们已经可以使用msbuild命令行来代替VS的一些构建动作了。由于本篇的重点是grunt,读者可以参见微软的说明,自己试验一下:

PS: MSbuild通常位于类似这样的目录下:C:\Windows\Microsoft.NET\Framework64\v4.0.30319\MSBuild.exe
使用grunt-msbuild调用msbuild
终于到了介绍本文的主角了:grunt-msbuild。这是一个个人开发的msbuild调用中间件。作为grunt的插件,经过笔者亲测,完全可以使用。结合其他的grunt插件,简化了笔者发布项目的过程。

你可以像下面这样将这个插件添加进项目的Gruntfile,实现自动发布:

msbuild: {
  fontend: {
    src: ['Web.FontEnd/Web.FontEnd.csproj'],
    options: {
      projectConfiguration: 'Release',
      targets: ['WebPublish'],
      stdout: true,
      maxCpuCount: 4,
      buildParameters: {
        WarningLevel: 2,
  VisualStudioVersion: "11.0",
  DeleteExistingFiles: 'True',
  WebPublishMethod: 'FileSystem',
  publishUrl: [font_pwd]
      },
      verbosity: 'quiet'
    }
  }
}

上面的代码实现了,将Web.FontEnd.csproj项目在Release模式下通过FileSystem发布方式发布到font_pwd变量指代的目录下。 这里需要注意的是,可能需要根据自己的VS版本修改VisualStudioVersion参数,可以通过查看类似如下目录:C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0来检查。font_pwd是一个js变量,根据需要进行调整。

Grunt的完整配置就不给出了,主要是要知道这几个关键的参数设置。

在实际使用过程中DeleteExistingFiles这个参数似乎不起作用,所以可能需要另外再包含清空目标文件夹的任务。下面是实际任务运行时的部分截图:

(0)

相关推荐

  • ASP.NET笔记之文章发布管理小系统案例

    母版页:SiteFont.Master 复制代码 代码如下: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteFont.master.cs" Inherits="协同企业管理系统.SiteFont" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

  • Asp.net Core 初探(发布和部署Linux)

    前言 俗话说三天不学习,赶不上刘少奇.Asp.net Core更新这么长时间一直观望,周末帝都小雨,宅在家看了下Core Web App,顺便搭建了个HelloWorld环境来尝尝鲜,第一次看到.Net Web运行在Linux上还是有点小激动(只可惜微软走这一步路走的太晚,要不然屌丝们也不会每每遇见Java VS .Net就想辩论个你死我活). 开发环境和部署环境 Windows 10.VS2015 Update3.安装.Net Core SDK.DotNetCore.1.0.1-VS2015T

  • asp.net程序在调式和发布之间图片路径问题的解决方法

    服务器控件显示图片问题不大,会自动显示相对位置, 非服务器控件有两种方法解决: 1. Request.ApplicationPath + 图片路径(images/xxx.gif) : 数据库里 图片路径以文件夹名开头 2. ResolveClientUrl("(~/images/xxx.gif") : 数据库里 图片路径为(~/开头) 注意: ResolveClientUrl 返回相对于当前页面下文件的地址 ResolveUrl 则返回页面所在应用程序下的相对地址

  • 解决asp.net Sharepoint无法连接发布自定义字符串处理程序,不能进行输出缓存处理的方法

    问题描述: 无法连接发布自定义字符串处理程序,不能进行输出缓存处理.IIS 实例 ID 为"1772638466", URL 为"http://XXXX.XXX.XXX/EnglishWorld/Default.aspx". 有关更多信息,请参阅在 http://go.microsoft.com/fwlink/events.asp 的帮助和支持中心. 在系统日志大片出现(除了URL不同),但貌似对系统没什么影响,能正常使用. 此问题不会影响正常使用,但日志很快就满了

  • 关于有些Asp.net项目发布后出现网址乱码的解决方法

    当我输入网站域名,打开网页后url中会跟一段"乱码" 复制代码 代码如下: http://www.XXXX.com/(S(jnzpixfqi5rge5rnl45vdb45))/index.aspx 最后在查看web.config时看到了一句 <sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" sqlConnectionString="d

  • ASP.NET程序发布详细过程

    前言 ASP.NET网站的发布,无论是初学者还是高手,在程序的发布过程中或多或少会存在一些问题,譬如VS发布ASP.NET程序失败.IIS安装失败.IIS发布失败.局域网内不能访. 配置文件错误.权限不足等一系列问题,结合我带领的500多人的技术团队反应的各种问题,我今天花点时间总结一下,方便大家,共同学习,共同进步. 为了后文的深入详细分析,我写了一个小Demo,代码附上.本次基于VS2013,OS为WIN10,IIS7等环境讲解.(其他操作系统如WIN7原理也类似,但有细微差别) 1.解决方

  • 简析ASP.NET网站的创建与发布过程

    一.简单网站创建: 1.首先打开VS, 2.文件-->新建-->网站-->ASP.NET(注意语言选择c#)-->对项目进行命名,这里命名为hopeTest: 3.系统会默认生成一个Default.aspx文件,文件内容如下: <%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PU

  • 详解Asp.Net Core 发布和部署( MacOS + Linux + Nginx )

    前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在Linux中,对 Asp.Net Core 的程序进行发布和部署. 目录 新建一个 WebApp 项目 发布到 Linux,Mac OS 使用 Nginx 进行反向代理 新建一个 WebApp 项目 在 Asp.Net Core 项目中,我们使用 dotnet new -t WebApp 命令和创建一个新的空的 Web 应用程序. 以下是我在 Mac 中的截图: 主要是用以下几个命令: mkdir He

  • ASP.NET MVC3网站创建与发布(1)

    有时候我们有了网站但是却不知道怎么进行发布,这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载. 1.项目创建 打开VS2010,选择 文件--新建项目---ASP.NET MVC3 web应用程序,如下图  接着选择Razor视图,如下图,点击确定,这样一个MVC3项目就创建完成了  2.网站发布    右键选择刚创建的项目,弹出一个下拉菜单,选择 "发布"菜单,弹出 &quo

  • 解读ASP.NET 5 & MVC6系列教程(3):项目发布与部署

    本章我们将讲解ASP.NET5项目发布部署相关的内容,示例项目以我们前一章创建的BookStore项目为例. 发布前的设置 由于新版ASP.NET5支持多版本DNX运行环境的发布和部署,所以在部署之前,我们需要设定部署的目标DNX(即之前的KRE). 步骤:右键BookStore项目->属性->Application选项卡,选择DNX的版本,本例中,选择dnx-coreclr-win-x64.1.0.0-beta4. 在project.json文件的commands节点,我们可以看到,系统默认

随机推荐