ASP.NET 5系列教程 (五)：在Visual Studio 2015中使用Grunt、Bower開發Web程式__.net

基於Visual Studio 2015，你可以： 方便的管理前端包，如jQuery, Bootstrap, 或Angular。 自動運行任務，如LESS、JavaScript壓縮、JSLint、JavaScript單元測試等。 方便的獲得Web開發人員生態圈的工具包。

為了實現這些情境，Visual Studio 2015已經內建了一些流行的第三方工具包： Bower：Web包管理器，Bower可以幫你安裝前端包，包括JavaScript、CSS類庫。對於伺服器端包，請通過NuGet包管理。 Grunt and Gulp：Grunt和Gulp是基於JavaScript的運行任務。如你未用過類似功能，可以認為這是一個自動調度啟動並執行app，ASP.NET 5工程模板使用的是Grunt運行任務。 npm (Node Package Manager). npm是一個node包管理器，最初被用於Node.js包管理。上面說的Bower、Grunt、Gulp用到了npm。

 

啟動Visual Studio 2015，建立一個ASP.NET 5.0的工程，選擇檔案-> 建立工程->Visual C#->Web->ASP.NET Web應用程式：

 

在建立工程對話方塊，選擇ASP.NET 5.0 Starter Web

 

建立一個ASP.NET MVC 6 app，工程檔案結構如下：

 

該工程下，包括如下重要的設定檔： Project.json. 主工程檔案，NuGet 包依賴清單. package.json. npm包清單. bower.json. Bower包清單. gruntfile.js. 配置Grunt任務.

  靜態檔案和wwwroot

wwwroot 檔案夾在ASP.NET 5.0中是新增的，工程中所有的靜態檔案存放於此。且用戶端可直接存取這些檔案，包括HTML檔案、CSS檔案、Images檔案、JavaScript檔案。wwwroot檔案夾是網站的根目錄，如這個網域名稱http://hostname/指向wwwroot檔案夾。

代碼應該存放在wwwroot外，包括C#檔案、Razor檔案，既wwwroot檔案夾用於實現代碼檔案、靜態檔案的隔離。 編譯CoffeeScript or TypeScript 檔案為JavaScript. 編譯LESS or Sass 檔案為CSS. 壓縮JavaScript. 最佳化image檔案.

以上的操作會把wwwroot檔案夾外的代碼檔案進行編譯，然後拷貝到wwwroot檔案夾下，這樣前端即可訪問。可通過任務調度自動執行這些步驟。

{    "webroot": "wwwroot",    "version": "1.0.0-*",    // ... }

  使用Bower來進行前端包管理

下面我們看看如何在Visual Studio 2015 中使用Bower進行前端包管理，在本節中，我們天津RequireJs類庫給app。

開啟bower.json，在dependencies節添加requirejs入口。

"dependencies": {        "bootstrap": "~3.0.0",        "jquery": "~1.10.2",        "jquery-validation": "~1.11.1",        "jquery-validation-unobtrusive": "~3.2.2",        "requirejs": "^2.1"    },

 

備忘：bower版本文法模式是”major.minor.patch”. 在^2.1中，字元'^’指定最小版本號碼。'~1.10.2' 用於指定最小為1.10.2版本，或者任何1.10的最新補丁。 更多細節，請查看Github：https://github.com/npm/node-semver.

在Visual Studio 2015下，可使用智能感知獲得可用包的列表：

 

也可以獲得包版本號碼的智能提示

 

現在安裝最新包，在解決方案視圖，點擊Dependencies，然後在Bower檔案夾上右擊單擊Restore Packages.

 

可通過Output 表單查看安裝的細節。 包被安裝到bower_components檔案夾。

Visual Studio會自動載入對應版本的包在您的解決方案中。這樣包檔案就不用上傳到源碼管理下。

  使用Grunt運行任務調度

使用gruntfile.js 檔案來定義Grunt任務，預設的工程模板包括了這樣的任務，如Bower包管理器。

下面我們使用Grunt來添加LESS處理、編譯過程。

在工程下，建立一個檔案夾assets。

在assets檔案夾上右鍵，選擇Add > New Item. 在建立項對話方塊中，選擇LESS Style Sheet檔案，命名為“site.less”.

粘貼如下代碼到site.less檔案

@base: teal;body {    background-color: @base;}

使用@base 變數用於定義顏色值，這個變數被用於LESS的特性。 安裝task，建立一個Grunt task或者複用一個存在的. 在Grunt檔案中配置task. 綁定task到Visual Studio編譯任務中

 

在package.json檔案中，配置grunt-contrib庫。

{    "version": "0.0.0",    "name": "MyApp",    "devDependencies": {        "grunt": "^0.4.5",        "grunt-bower-task": "^0.4.0",        // Add this:        "grunt-contrib-less": "^0.12.0"    }}

在輸入的時候，同樣會看到可用包列表：

同樣可智能感知出版本號碼：

 

在解決方案，點擊Dependencies > NPM，你可以看到grunt-contrib-less已經被列出來，但是目前尚未安裝。

點擊右鍵，Restore Packages。

安裝完成的gruntfile.js 檔案如下所示：

module.exports = function (grunt) {    grunt.initConfig({        bower: {            install: {                options: {                    targetDir: "wwwroot/lib",                    layout: "byComponent",                    cleanTargetDir: