ホームページ > ウェブフロントエンド > jsチュートリアル > Node.js ベースのビルド ツール Grunt を使用して ASP.NET MVC プロジェクトを公開する_node.js

Node.js ベースのビルド ツール Grunt を使用して ASP.NET MVC プロジェクトを公開する_node.js

WBOY
リリース: 2016-05-16 15:15:30
オリジナル
1892 人が閲覧しました

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檔組成。實際上Vi​​sualStudio中的.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这个参数似乎不起作用,所以可能需要另外再包含清空目标文件夹的任务。下面是实际任务运行时的部分截图:

2016215152103887.jpg (542×315)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート