Grunt 簡介
Grunt是一款基于js和node.js的構(gòu)建工具，由于這段時(shí)間node.js越來越火爆，grunt擁有豐富的開源社區(qū)支持，產(chǎn)生了很多插件。還有一些插件散落在node社區(qū)。構(gòu)建是一個(gè)和寬泛的表述，傳統(tǒng)理解就是編譯、打包、復(fù)制，而今，隨著技術(shù)越來越豐富，構(gòu)建還包括對前端組件的預(yù)處理，比如sass、less預(yù)處理成css，css和js的壓縮和合并。grunt的插件可以很好的支持這些新的構(gòu)建概念，而且更為適合用開源技術(shù)堆砌的項(xiàng)目。 雖然Grunt更多的用于程序構(gòu)建，但是本質(zhì)上Grunt是一個(gè)用來解決重復(fù)勞動(dòng)的任務(wù)運(yùn)行工具。
Grunt入門
安裝
下載安裝Node.js。
檢查安裝和查看版本：
node -v
v0.10.25
安裝grunt命令行工具grunt-cli，使用-g全局安裝，這樣可以在任何一個(gè)目錄里使用了。下面這條命令會(huì)把 grunt 加入你的系統(tǒng)搜索路徑中，所以在任何目錄下都可以使用此命令。
npm install -g grunt-cli
需要注意的是在linux或mac下有時(shí)會(huì)報(bào)沒有權(quán)限的錯(cuò)誤，這時(shí)須在前面加一個(gè)sudo
sudo npm install grunt-cli -g
查看版本：
grunt –version
grunt-cli v0.1.13
卸載。如果你在之前安裝過全局的 Grunt，那么先刪除它。
npm uninstall -g grunt
grunt-cli只是一個(gè)grunt的命令行界面，需要使用grunt及其插件，必須在項(xiàng)目的路徑(通常是項(xiàng)目根目錄下)下安裝grunt模塊本身即需要插件模塊。每當(dāng)grunt命令被執(zhí)行時(shí)，它會(huì)通過nodejs的require命令在本地尋找已經(jīng)安裝的grunt。正因?yàn)槿绱耍憧梢栽谌魏巫幽夸浵逻\(yùn)行g(shù)runt命令。 如果cli找到了一個(gè)本地安裝的grunt，它會(huì)加載這個(gè) grunt 庫，然后應(yīng)用你在 GruntFile 中寫好的配置， 然后執(zhí)行相應(yīng)的任務(wù)。
配置文件
package.json
package.json用來保存當(dāng)前目錄下所安裝和需要的node模塊有哪些，例如：
{ "name": "my-project-name", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt": "~0.4.1" }} 可以手動(dòng)創(chuàng)建這個(gè)文件，或者通過npm init命令，并按照提示完成package.json文件的創(chuàng)建。如果手動(dòng)創(chuàng)建了package.json，只需通過npm install來下載和安裝所需的模塊。模塊安裝時(shí)，會(huì)保存在node_modules目錄中。
如果想要在之后添加所需模塊，使用下面這個(gè)命令，可以使得package.json文件得到同步更新
npm install <module> --save-dev
Gruntfile.js
這個(gè)文件的地位就像Makefile一樣，是一個(gè)指導(dǎo)grunt進(jìn)行任務(wù)的文件，其中需要配置各個(gè)插件模塊所需的參數(shù)，以及加載插件，并定義任務(wù)。更多關(guān)于Gruntfile可以參考這里。建議讀者對Gruntfile有個(gè)整體的理解再繼續(xù)。
使用Grunt構(gòu)建ASP.NET MVC
MSbuild
在使用grunt來構(gòu)建.NET項(xiàng)目之前，必須先了解MSbuild。MSBuild是微軟的用來構(gòu)建程序的工具，目前VisualStudio已經(jīng)全面使用MSbuild編譯項(xiàng)目了。MSbuild由一個(gè)msbuild工具、一組編譯或構(gòu)建器程序和xml文件組成。實(shí)際上VisualStudio中的.sln和.csproj等項(xiàng)目文件就是一個(gè)msbuild能夠認(rèn)識(shí)的xml（下面稱為msbuild配置文件）,VisualStudio通過調(diào)用msbuild，由msbuild識(shí)別其中的參數(shù)和構(gòu)建行為標(biāo)識(shí)來完成構(gòu)建工作。我們也可以自己通過命令行自己來調(diào)用msbuild。
在msbuild中有兩個(gè)關(guān)鍵的概念：Task和Property。Task是msbuild能夠直接作為目標(biāo)來執(zhí)行的入口，在執(zhí)行msbuild的時(shí)候要么指向默認(rèn)的Task，否則必須指定目標(biāo)Task是什么。Property就是變量，就像程序中的變量可以影響程序執(zhí)行一樣，Property可以影響構(gòu)建的行為。
VisualStudio產(chǎn)生msbuild配置文件其實(shí)非常復(fù)雜，表面上看只有沒有多上行，但是它通過import，將一些預(yù)定義的配置文件導(dǎo)入到當(dāng)前文件，使得無法全面的查看完整的配置文件，以至于無法找到關(guān)鍵的Task項(xiàng)。好在有一個(gè)工具可以用來幫助分析msbuild配置文件的結(jié)構(gòu)。
另外，在調(diào)用msbuild的時(shí)候，可以通過命令行參數(shù)來覆蓋默認(rèn)的屬性和任務(wù)，比如下面的調(diào)用表示，以”Rebuild”這個(gè)Task作為目標(biāo)，并將Configuration屬性設(shè)置為Debug：
msbuild ConsoleApplication1.csproj /target:Rebuild /property:Configuration=Debug
更多關(guān)于msbuild，請參考微軟的文檔
手動(dòng)使用msbuild代替VisualStudio
以發(fā)布到本機(jī)為例，經(jīng)過筆者在VS2012下的環(huán)境中測試，使用VS在調(diào)用msbuild時(shí)使用了如下關(guān)鍵的參數(shù)覆蓋：
- Configuration：Debug或者Release，相信使用VS的同學(xué)對此不會(huì)陌生
- VisualStudioVersion：VS在安裝的時(shí)候會(huì)將一些公用的，VisualStudio相關(guān)的，msbuild配置文件預(yù)先存在某個(gè)版本相關(guān)的地方，在VisualStudio生成項(xiàng)目文件時(shí)，會(huì)包含一個(gè)$VisualStudioVersion變量，這個(gè)變量會(huì)與路徑結(jié)合指向這些預(yù)先準(zhǔn)備好的配置文件。在2012下，需要將這個(gè)值設(shè)置為11.0
- WarningLevel：編譯時(shí)的告警級(jí)別
- DeleteExistingFiles：發(fā)布功能使用到的是否刪除已存在文件的選項(xiàng)
- WebPublishMethod：發(fā)布方式，筆者常用的是FileSystem，即發(fā)布到本機(jī)或遠(yuǎn)程共享的某個(gè)目錄
- publishUrl：如果WebPublishMethod是FileSystem，這個(gè)值表示發(fā)布的磁盤路徑
關(guān)鍵的任務(wù)：
- Build：即VS中針對某個(gè)項(xiàng)目的編譯功能
- Rebuild：即VS中針對某個(gè)項(xiàng)目的重新編譯功能
- WebPublish：即VS針對某個(gè)項(xiàng)目的發(fā)布功能
至此，我們已經(jīng)可以使用msbuild命令行來代替VS的一些構(gòu)建動(dòng)作了。由于本篇的重點(diǎn)是grunt，讀者可以參見微軟的說明，自己試驗(yàn)一下：
PS: MSbuild通常位于類似這樣的目錄下：C:/Windows/Microsoft.NET/Framework64/v4.0.30319/MSBuild.exe
使用grunt-msbuild調(diào)用msbuild
終于到了介紹本文的主角了：grunt-msbuild。這是一個(gè)個(gè)人開發(fā)的msbuild調(diào)用中間件。作為grunt的插件，經(jīng)過筆者親測，完全可以使用。結(jié)合其他的grunt插件，簡化了筆者發(fā)布項(xiàng)目的過程。
你可以像下面這樣將這個(gè)插件添加進(jìn)項(xiàng)目的Gruntfile，實(shí)現(xiàn)自動(dòng)發(fā)布：
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' } }} 上面的代碼實(shí)現(xiàn)了，將Web.FontEnd.csproj項(xiàng)目在Release模式下通過FileSystem發(fā)布方式發(fā)布到font_pwd變量指代的目錄下。 這里需要注意的是，可能需要根據(jù)自己的VS版本修改VisualStudioVersion參數(shù)，可以通過查看類似如下目錄：C:/Program Files (x86)/MSBuild/Microsoft/VisualStudio/v11.0來檢查。font_pwd是一個(gè)js變量，根據(jù)需要進(jìn)行調(diào)整。
Grunt的完整配置就不給出了，主要是要知道這幾個(gè)關(guān)鍵的參數(shù)設(shè)置。
在實(shí)際使用過程中DeleteExistingFiles這個(gè)參數(shù)似乎不起作用，所以可能需要另外再包含清空目標(biāo)文件夾的任務(wù)。下面是實(shí)際任務(wù)運(yùn)行時(shí)的部分截圖：
