Use Node.js-based build tool Grunt to publish ASP.NET MVC projects_node.js

Grunt Introduction
Grunt is a construction tool based on js and node.js. Since node.js has become more and more popular during this period, grunt has rich open source community support and has produced many plug-ins. There are also some plugins scattered in the node community. Construction is a broad expression. The traditional understanding is compilation, packaging, and copying. Now, as the technology becomes more and more abundant, construction also includes the preprocessing of front-end components, such as preprocessing of sass and less into css, css, and js. Compression and merging. The grunt plug-in can support these new building concepts very well, and is more suitable for projects built with open source technologies. Although Grunt is more used for program construction, in essence Grunt is a task running tool used to solve repetitive tasks.

Getting Started with Grunt
Install
Download and install Node.js. Download address

Check installation and view version:

node -v

v0.10.25

Install the grunt command line tool grunt-cli and use -g to install it globally, so that it can be used in any directory. The following command will add grunt to your system search path, so you can use this command in any directory.

npm install -g grunt-cli

It should be noted that under linux or mac, an error of no permissions will sometimes be reported. In this case, a sudo must be added in front

sudo npm install grunt-cli -g

View version:

grunt –version

grunt-cli v0.1.13

Uninstall. If you have previously installed Grunt globally, remove it first.

npm uninstall -g grunt

grunt-cli is just a grunt command line interface, which requires the use of grunt and its plug-ins. The grunt module itself must be installed in the project path (usually the project root directory), which requires the plug-in module. Whenever the grunt command is executed, it will look for the installed grunt locally through the nodejs require command. Because of this, you can run grunt commands in any subdirectory. If the cli finds a locally installed grunt, it will load the grunt library, apply the configuration you wrote in GruntFile, and then perform the corresponding tasks.

Configuration file
package.json
package.json is used to save the installed and required node modules in the current directory, for example:

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

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

You can create this file manually or through the npm init command and follow the prompts to complete the creation of the package.json file. If you created the package.json manually, just download and install the required modules via npm install. When the module is installed, it will be saved in the node_modules directory.

If you want to add the required modules later, use the following command to update the package.json file synchronously

npm install <module> --save-dev

Gruntfile.js
The status of this file is just like a Makefile. It is a file that guides grunt to perform tasks. It needs to configure the parameters required by each plug-in module, load plug-ins, and define tasks. For more information about Gruntfile, please refer to here. It is recommended that readers have an overall understanding of Gruntfile before continuing.

Building ASP.NET MVC with Grunt
MSbuild
Before using grunt to build .NET projects, you must first understand MSbuild. MSBuild is Microsoft's tool for building programs. Currently, Visual Studio has fully used MSbuild to compile projects. MSbuild consists of a msbuild tool, a set of compiler or builder programs, and xml files. In fact, the .sln and .csproj project files in Visual Studio are xml that msbuild can recognize (hereinafter referred to as the msbuild configuration file). Visual Studio completes the build work by calling msbuild, and msbuild recognizes the parameters and build behavior identifiers. We can also call msbuild ourselves through the command line.

There are two key concepts in msbuild: Task and Property. Task is the entry point for msbuild to be executed directly as a target. When executing msbuild, it must point to the default Task, otherwise you must specify what the target Task is. Property is a variable. Just like variables in a program can affect program execution, Property can affect the behavior of the build.

The msbuild configuration file generated by VisualStudio is actually very complicated. On the surface, there are only a few uplinks. However, it imports some predefined configuration files into the current file through import, making it impossible to fully view the complete configuration file. Find the key Task item. Fortunately, there is a tool that can be used to help analyze the structure of the msbuild configuration file.

In addition, when calling msbuild, you can override the default properties and tasks through command line parameters. For example, the following call indicates that the "Rebuild" Task is used as the target and the Configuration attribute is set to 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这个参数似乎不起作用，所以可能需要另外再包含清空目标文件夹的任务。下面是实际任务运行时的部分截图：