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

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)

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1)グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2)バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3)パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント://および / * *を使用するためのガイドJavaScriptコメント://および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments:シングルライン(//)およびマルチライン(//)

Python vs. JavaScript:開発者の比較分析Python vs. JavaScript:開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript:ジョブに適したツールを選択するPython vs. JavaScript:ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1)データサイエンスおよび自動化タスクのPythonを選択します。 2)フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript:それぞれの強みを理解するPythonとJavaScript:それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア:CまたはCの上に構築されていますか?JavaScriptのコア:CまたはCの上に構築されていますか?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション:フロントエンドからバックエンドまでJavaScriptアプリケーション:フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例:Webページテキストのコンテンツを変更します。 2。バックエンドの例:node.jsサーバーを作成します。

Python vs. Javascript:どの言語を学ぶべきですか?Python vs. Javascript:どの言語を学ぶべきですか?May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1)キャリア開発:Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2)学習曲線:Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3)エコシステム:Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。