C# 6 與 .NET Core 1.0 高級編程 - 40 ASP.NET Core（上）

譯文，我的原創，轉載請註明出處（C# 6 與 .NET Core 1.0 高級編程 - 40 章  ASP.NET Core（上）），不對的地方歡迎指出與交流。   

章節出自《Professional C# 6 and .NET Core 1.0》。水平有限，各位閱讀時仔細分辨，惟望莫誤人子弟。  

附英文版原文：Professional C# 6 and .NET Core 1.0 - 40 ASP.NET Core

本章節譯文分爲上下篇，下篇見：C# 6 與 .NET Core 1.0 高級編程 - 40 ASP.NET Core（下）

 ---------------------------

本章內容

• 瞭解ASP.NET Core 1.0和Web技術
• 使用靜態內容
• 使用HTTP請求和應答
• 使用依賴注入與ASP.NET
• 定義自定義簡單路由
• 建立中間件組件
• 使用會話進行狀態管理
• 讀取配置設置

Wrox.com網站關於本章的源代碼下載

本章的wrox.com代碼下載位於http://www.wrox.com/go/professionalcsharp6的「下載代碼」選項卡上。本章的代碼包含此示例項目：WebSampleApp。

ASP.NET Core 1.0

ASP.NET通過15年（譯者注：第一個版本的asp.net在2002年2月發佈），ASP.NET Core 1.0是一個徹底重寫的ASP.NET。它具備模塊化編程的特徵，徹底開放源代碼，輕量級以便在雲平臺獲得最佳使用，而且可用於非Microsoft平臺。

徹底重寫ASP.NET有不少優勢，但這也意味着要從新處理基於ASP.NET的舊版本的現有Web應用程序。是否有必要將現有的Web應用程序重寫到ASP.NET Core 1.0？讓咱們試着回答這個問題。

ASP.NET Web窗體再也不是ASP.NET Core 1.0的一部分。然而，擁有包含此技術的Web應用程序並不意味着必須重寫它們。仍然可使用完整的框架來維護使用ASP.NET Web Forms編寫的遺留的應用程序。 甚至在最新版本的ASP.NET 4.6 中對ASP.NET Web窗體進行了加強，例如異步模型捆綁。

ASP.NET MVC仍然是ASP.NET Core 1.0的一部分。由於ASP.NET MVC 6已經徹底重寫，因此您須要對使用ASP.NET MVC 5或更早版本編寫的Web應用程序進行一些更改，以將它們帶到新的應用程序堆棧。

將ASP.NET Web窗體轉換爲ASP.NET MVC可能須要作不少工做。 ASP.NET Web窗體從開發者角度抽象出HTML和JavaScript。使用ASP.NET Web窗體，沒有必要知道HTML和JavaScript，而是使用帶有C＃代碼的服務器端控件。服務器端控件自己返回HTML和JavaScript。這種編程模型相似於舊的Windows窗體編程模型。使用ASP.NET MVC，開發人員須要知道HTML和JavaScript。 ASP.NET MVC是基於模型 - 視圖 - 控制器（MVC）模式，這很容易進行單元測試。由於ASP.NET Web窗體和ASP.NET MVC基於大相徑庭的架構模式，因此將ASP.NET Web窗體應用程序遷移到ASP.NET MVC是一項巨大的工做。在進行這項任務以前，應該創建一個清單，列出使用解決方案保留舊技術的優勢和缺點，並將其與使用新技術的優勢和缺點進行比較。ASP.NET Web窗體還能夠用來工做多年。

注意 本書編者的網站http://www.cninnoation.com最初是用ASP.NET Web窗體建立的。這個網站已經被轉換成早期版本的新技術的ASP.NET MVC。因爲原來的網站已經使用了不少獨立的組件來抽象數據庫和服務代碼，它並不算是一個真正的巨大的任務，因此作得很是快。所以可以直接從ASP.NET MVC使用數據庫和服務代碼。另外一方面，若是開始使用Web窗體控件訪問數據庫而不是使用自定義的控件，這也將是一個繁雜的工做。

注意 本書不包括傳統技術的ASP.NET Web窗體。 也不包括ASP.NET MVC 5。本書重點介紹新技術，所以關於Web應用程序，材料基於ASP.NET 5和ASP.NET MVC 6。這些技術應該用於新的Web應用程序。若是須要維護較舊的應用程序，應該閱讀比本書更早的版本，如《Professional C＃5.0和.NET 4.5.1》，它介紹 ASP.NET 4.5，ASP.NET Web窗體4.5和ASP.NET MVC 5 。

本章介紹了ASP.NET Core 1.0的基礎，第41章解釋了使用ASP.NET MVC 6，這是一個構建在ASP.NET Core 1.0之上的框架。

Web技術

在本章後面介紹ASP.NET的基礎以前，本節將介紹在建立Web應用程序時很是重要的核心Web技術：HTML，CSS，JavaScript和jQuery。

HTML

HTML是由Web瀏覽器解釋的標記語言。它定義元素以顯示各類標題、表、列表和輸入元素，如文本和組合框。

自2014年10月以來，HTML5一直是W3C的一項建議（http://w3.org/TR/html5），並且全部主流瀏覽器都提供支持。使用HTML5的功能，不少瀏覽器插件（例如Flash和Silverlight）已經不須要，由於加載項所作的事情如今能夠直接使用HTML和JavaScript完成。固然，您可能仍須要Flash和Silverlight，由於並不是全部網站都遷移到新技術，或者用戶可能仍在使用不支持HTML5的舊版瀏覽器版本。

HTML5增長了新的語義元素，搜索引擎可以更好地用於分析網站。畫布元素容許動態使用2D形狀和圖像，視頻和音頻元素使對象元素過期。最近的媒體源產品（http://w3c.github.io/media-source）自適應流也由HTML提供，之前這是Silverlight的一個優點。

HTML5還定義了用於拖放、存儲、Web套接字等的API。

CSS

HTML定義網頁的內容，而CSS定義外觀。例如在早期的HTML中，列表項標籤<li>定義列表元素是否應該顯示爲圓形，圓盤或正方形。如今這些信息被徹底從HTML中刪除，而是放入級聯樣式表（CSS）。

CSS樣式可使用靈活的選擇器來選擇HTML元素，而且能夠爲這些元素定義樣式。能夠經過其ID或其名稱選擇元素，還能夠定義HTML代碼內的可被引用的CSS類。對於較新版本的CSS，能夠定義比較複雜的規則來選擇特定的HTML元素。

從Visual Studio 2015開始，Web項目模板可使用Twitter Bootstrap。這是一個CSS和HTML約定的集合，能夠輕鬆適應不一樣的外觀和下載即用模板。有關文檔和基本模板，請訪問www.getbootstrap.com。

JavaScript和TypeScript

並不是全部平臺和瀏覽器均可以使用.NET代碼，但幾乎每一個瀏覽器都支持JavaScript。一個對JavaScript的常見誤解是它與Java有關。事實上，只有名稱是相似的，由於Netscape（JavaScript的發起者）與Sun（Sun發明Java）達成協議，容許在名稱中使用Java。現在，這兩家公司已再也不存在。 Sun被Oracle收購，如今Oracle持有Java的商標。

Java和JavaScript（和C＃）都有相同的根 - C編程語言。 JavaScript是一種不是面向對象的功能性編程語言，儘管它已經添加面向對象的功能。

JavaScript容許從HTML頁面訪問文檔對象模型（DOM），這使得客戶端上能夠動態更改元素。

ECMAScript是定義JavaScript語言的當前和即將到來的特性的標準。由於其餘公司不容許在其語言實現中使用術語Java，因此標準名稱爲ECMAScript。 Microsoft的JavaScript實現名稱是JScript。請查看http://www.ecmascript.org瞭解JavaScript語言的現狀和發展動態。

即便許多瀏覽器不支持最新的ECMAScript版本，但仍然能夠編寫ECMAScript 5代碼。可使用TypeScript代替編寫JavaScript代碼。 TypeScript語法基於ECMAScript，但它具備一些加強功能，例如強類型代碼和註釋。能夠看到C＃和TypeScript之間有不少類似之處。由於TypeScript編譯器編譯爲JavaScript，因此TypeScript能夠在須要JavaScript的任何地方使用。有關TypeScript的詳細信息，請訪問http://www.typescriptlang.org。

腳本庫

除了JavaScript編程語言，還須要腳本庫，來使生活更輕鬆（譯者注：這句話有點調侃的意味）。

• jQuery（http://www.jquery.org）是一個庫，它在訪問DOM元素並對事件作出反應時抽象出瀏覽器的差別。
• Angular（http://angularjs.org）是一個基於MVC模式的庫，用於簡化單頁Web應用程序的開發和測試。 （與ASP.NET MVC不一樣，Angular提供了客戶端代碼的MVC模式。）

ASP.NET Web項目模板包括jQuery庫和Bootstrap。 Visual Studio 2015支持IntelliSense和調試JavaScript代碼。

注意 本書中沒有介紹爲Web應用程序設計樣式和編寫JavaScript代碼。能夠在 《HTML和CSS》中閱讀更多關於HTML和樣式：John Ducket設計和構建網站（Wiley，2011），並經過Nicholas C. Zakas（Wrox，2012）爲Web開發人員加快專業JavaScript技術提高。

ASP.NET Web項目

首先建立一個名爲WebSampleApp的空ASP.NET Core 1.0 Web應用程序（參見圖40.1）。本章從一個空模板開始添加功能。

 

圖40.1

注意經過本章的示例代碼下載，須要取消註釋啓動類中的特定代碼塊來激活所討論的功能。也能夠從頭開始建立項目。沒有太多的代碼能夠看到全部的功能。

建立項目後，將看到一個名爲WebSampleApp的解決方案和項目文件，其中包含一些文件和文件夾（參見圖40.2）。

 

圖40.2該解決方案包含global.json配置文件，該文件列出解決方案的目錄。能夠在如下代碼段中從「projects」鍵的值查看此內容。 src目錄包含具備源代碼的解決方案的全部項目。「test」目錄用於定義單元測試，雖然它們還不存在。 sdk設置定義所使用的SDK的版本號（代碼文件global.json）。

{
  "projects": ["src","test" ],
  "sdk": {
    "version":"1.0.0-0"
  }
}

在項目結構中，使用瀏覽器打開文件Project_Readme.html時，能夠看到有關ASP.NET Core 1.0的一些整體信息。在項目文件夾中能夠看到一個「References」文件夾。它包含全部引用的NuGet包。對於一個空的ASP.NET Web應用程序項目，引用的軟件包僅有Microsoft.AspNetCore.IISPlatformHandler和Microsoft.AspNetCore.Server.Kestrel。

IISPlatformHandler包含IIS的模塊，用於將IIS基礎結構映射到ASP.NET Core 1.0。 Kestrel是ASP.NET Core 1.0的一個新的Web服務器，在Linux平臺上也可使用它。

還能夠在project.json文件中找到NuGet包的引用。 （在如下代碼片斷中，它們在「dependencies」部分。）框架部分列出了支持的.NET框架，如net452（.NET 4.5.2）和netstandard1.0（.NET Core 1.0）。能夠刪除不須要託管的那個。 「exclude」部分列出了不該用於編譯應用程序的文件和目錄。「publishExclude」部分列出不該發佈的文件和文件夾（代碼文件WebSampleApp/project.json）：

{
  "version":"1.0.0-*",
  "compilationOptions": {
    "emitEntryPoint": true
  },
  "dependencies": {
    "NETStandard.Library":"1.0.0-*",
    "Microsoft.AspNetCore.IISPlatformHandler":"1.0.0-*",
    "Microsoft.AspNetCore.Server.Kestrel":"1.0.0-*"
  },
  "frameworks": {
    "net452": { },
    "netstandard1.0": {
      "dependencies": {
        "NETStandard.Library":"1.0.0-*"
       }
     }
  },
  "content": ["hosting.json" ]
  "exclude": [
    "wwwroot",
    "node_modules"
  ],
  "publishExclude": [
    "**.user",
    "**.vspscc"
  ]
}

「項目設置」中的「調試」選項能夠配置使用Visual Studio開發時使用的Web服務器（請參見圖40.3）。默認狀況下，IIS Express使用「調試」設置指定的端口號進行配置。 IIS Express由Internet信息服務器（IIS）派生，並提供IIS的全部核心功能。這樣在幾乎相同的環境中開發Web應用程序變得容易，在該環境中應用程序將被稍後託管（若是IIS用於託管）。

 

圖40.3

要使用 Kestrel 服務器運行應用程序，可使用「調試項目」設置選擇Web配置文件。Profile選項中的可用選項列表是project.json中列出的命令。

使用Visual Studio項目設置更改的設置會影響launchSettings.json文件的配置。此文件還能夠定義一些其餘配置，如命令行參數（代碼文件WebSampleApp/Properties/launchsettings.json）：

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl":"http://localhost:19879/",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName":"IISExpress",
      "launchBrowser": true,
      "environmentVariables": { 
        "Hosting:Environment":"Development"
      }
    },
    "web": {
      "commandName":"web",
      "launchBrowser": true,
      "launchUrl":"http://localhost:5000/",
      "commandLineArgs":"Environment=Development",
      "environmentVariables": {
        "Hosting:Environment":"Development"
      }
    }
  }
}

解決方案資源管理器中項目結構中的「Dependencies」文件夾顯示JavaScript庫的依賴項。 建立空項目時，該文件夾爲空。 本章後面的「添加靜態內容」部分添加依賴項。

「wwwroot」文件夾是須要發佈到服務器的靜態文件的文件夾。 目前這個文件夾是空的，但經過這一章，能夠添加HTML和CSS文件和JavaScript庫。

一個C＃源文件 - Startup.cs - 也包括在一個空項目中。 接下來討論這個文件。在建立項目期間，須要這些依賴項和命名空間：

依賴項

Microsoft.AspNetCore.Http.Abstractions
Microsoft.AspNetCore.IISPlatformHandler
Microsoft.AspNetCore.Server.Kestrel
Microsoft.AspNetCore.StaticFiles
Microsoft.AspNetCore.Session
Microsoft.Extensions.Configuration
Microsoft.Extensions.Configuration.UserSecrets
Microsoft.Extensions.Logging
Microsoft.Extensions.Logging.Console
Microsoft.Extensions.Logging.Debug
Microsoft.Extensions.PlatformAbstractions
Newtonsoft.Json
System.Globalization
System.Text.Encodings.Web
System.Runtime

命名空間

Microsoft.AspNetCore.Builder;
Microsoft.AspNetCore.Hosting;
Microsoft.AspNetCore.Http;
Microsoft.Extensions.Configuration
Microsoft.Extensions.DependencyInjection
Microsoft.Extensions.Logging
Microsoft.Extensions.PlatformAbstractions
Newtonsoft.Json
System
System.Globalization
System.Linq
System.Text
System.Text.Encodings.Web
System.Threading.Tasks

啓動

如今是時候開始從Web應用程序中得到一些功能。 要獲取有關客戶端的信息並返回響應，須要對HttpContext寫一個響應。

在空的ASP.NET Web應用程序模板建立一個啓動類，其中包含如下代碼（代碼文件WebSampleApp/Startup.cs）：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
// etc.
namespace WebSampleApp
{
  public class Startup
  {
    public void ConfigureServices(IServiceCollection services)
    {
    }
    public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
    {
      app.UseIISPlatformHandler();
      // etc.

      app.Run(async (context) =>
      {
        await context.Response.WriteAsync("Hello World!");
      });
    }
    public static void Main(string[] args)
    {
      var host = new WebHostBuilder()
        .UseDefaultConfiguration(args)
        .UseStartup<Startup>()
        .Build();
      host.Run();
    }
  }
}

Web應用程序的入口點是 Main 方法。以前在project.json配置文件中看到的emitEntryPoint配置能夠定義是否應該使用Main方法。還定義了在本書中建立的.NET Core控制檯應用程序的Main方法。只有庫不須要Main方法。

使用從Visual Studio模板生成的默認實現，Web應用程序在WebHostBuilder實例的幫助下配置。WebHostBuilder將調用UseDefaultConfiguration方法。該方法接收命令行參數並建立包括可選託管文件（hosting.json）的配置，添加環境變量，並將命令行參數添加到配置。方法UseStartup定義使用Startup類，它反過來調用方法ConfigureServices和Configure。WebApplicationBuilder調用的最後一個方法是Build方法，它返回實現接口IWebApplication的對象。返回的應用程序對象調用Run方法，啓動託管引擎，如今服務器進入偵聽和等待請求狀態。hosting.json文件用於配置服務器（代碼fileWebSampleApp/hosting.json）：

{
  "server":"Microsoft.AspNetCore.Server.Kestrel",
  "server.urls":"http://localhost:5000"
}

Startup類被傳遞給具備通用模板參數的UseStartup方法，而後調用ConfigureServices和Configure方法。

Configure方法經過實現接口IApplicationBuilder的依賴注入接收內部應用程序編譯器類型。該接口用於定義應用程序使用的服務。調用接口的Use方法，能夠建立HTTP請求管道以定義請求的應答要作什麼。Run方法是接口IApplicationBuilder的擴展方法，它調用Use方法。該方法在程序集Microsoft.AspNetCore.Http.Abstractions中的RunExtensions擴展類和命名空間Microsoft.AspNetCore.Builder實現。

Run方法的參數是RequestDelegate類型的委託。該類型接收HttpContext做爲參數，並返回一個Task。HttpContext（代碼片斷中的 context 變量）能夠訪問瀏覽器中的請求信息（HTTP頭，Cookie和表單數據），也能夠發送響應。代碼片斷返回一個簡單的字符串 - Hello，World！ - 到客戶端，如圖40.4所示。

 

圖40.4

注意 若是使用Microsoft Edge測試Web應用程序，則須要啓用localhost。在地址欄中鍵入about：flags，並啓用「容許本地主機環回」選項（見圖40.5）。不只可使用Microsoft Edge的內置用戶界面來設置此選項，還可使用命令行選項：實用程序CheckNetIsolation。命令 「CheckNetIsolation LoopbackExempt -a - n = Microsoft.MicrosoftEdge_8wekyb3d8bbwe」啓用本地主機相似於爲Microsoft Edge使用更友好的用戶界面。若是要配置其餘Windows應用程序以容許localhost，則實用程序CheckNetIsolation很是有用。

 

圖40.5

將日誌信息添加到Web應用程序對獲取更多的信息是很是有用的，可以瞭解發生了什麼。爲了達到這個目的，Startup 類的Configure方法接收ILoggerFactory對象。該接口可使用AddProvider方法添加日誌提供程序，並使用CreateLogger方法建立一個實現ILogger接口的日誌程序。如下代碼段中顯示的AddConsole和AddDebug方法是用於添加不一樣提供程序的擴展方法。 AddConsole方法添加一個提供程序負責將日誌信息寫入控制檯，AddDebug方法添加一個提供程序負責將日誌信息寫入調試程序。這兩種方法不傳遞參數值，默認值用於配置日誌消息。默認值指定爲寫入信息的日誌消息類型或者更高級別。能夠用不一樣的重載來指定其餘用於記錄的過濾項，或者可使用配置文件配置日誌記錄（代碼文件WebSampleApp/Startup.cs）：

public void Configure(IApplicationBuilder app, ILoggerFactory 
loggerFactory)
{
  // etc.
  loggerFactory.AddConsole();
  loggerFactory.AddDebug();
  // etc.
}

ILogger接口能夠在 Log 方法中編寫自定義日誌信息。

添加靜態內容

一般不會只是發送簡單的字符串到客戶端。 默認狀況下，沒法發送簡單的HTML文件和其餘靜態內容。 由於ASP.NET 5會盡量減小開銷。 若是不啓用它們，不會從服務器返回靜態文件。

要啓用從Web服務器提供的靜態文件，能夠添加擴展方法UseStaticFiles（並註釋先前建立的Run方法）：

public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
{
  app.UseiISPlatformHandler();
  app.UseStaticFiles();
  //etc.
}

只要將相同大小寫的代碼行添加到Configure方法中，編輯器中的智能標記就會添加NuGet包Microsoft.AspNet.StaticFiles。 選中該項，NuGet包下載並在project.json中列出：

 "dependencies": {
    "Microsoft.AspNetCore.IISPlatformHandler":"1.0.0-*",
    "Microsoft.AspNetCore.Server.Kestrel":"1.0.0-*",
    "Microsoft.AspNetCore.StaticFiles":"1.0.0-*"
  },

添加靜態文件的文件夾是項目中的「wwwroot」文件夾。 可使用webroot設置來配置 project.json 文件中的文件夾的名稱。 若是沒有配置文件夾，默認是「wwwroot」。 經過添加配置添加NuGet包，能夠將HTML文件添加到wwwroot文件夾（代碼文件WebSampleApp/wwwroot/Hello.html），以下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <h1>Hello, ASP.NET with Static Files</h1>
</body>
</html>

啓動服務器以後，從瀏覽器發出對HTML文件的請求，例如 http://localhost:5000/Hello.html 。根據配置，端口號可能因項目而異。

注意 在使用ASP.NET MVC建立Web應用程序時，還須要瞭解HTML，CSS，JavaScript和一些JavaScript庫。因爲本書的重點是C＃和.NET，這些主題的內容保持在最低限度。編者只是談及ASP.NET MVC和Visual Studio須要知道的最重要的任務。

使用JavaScript包管理器：npm

對於Web應用程序，一般須要一些JavaScript庫。在Visual Studio 2015以前，JavaScript庫可用做NuGet包 - 相似於.NET程序集做爲NuGet包使用。由於腳本庫周圍的社區一般不使用NuGet服務器，他們也不建立NuGet包。從Microsoft或Microsoft友好社區爲JavaScript庫建立NuGet包須要額外的工做。所以JavaScript周圍的社區使用具備相似於NuGet的功能的服務器而不是使用NuGet。

節點包管理器（npm）是JavaScript庫的包管理器。最初來自Node.Js（用於服務器端開發的JavaScript庫），npm對服務器端腳本很強大。然而，愈來愈多的客戶端腳本庫也能夠與npm一塊兒使用。

Visual Studio 2015 能夠經過從項目模板添加NPM配置文件，將npm添加到項目。添加項目模板時，package.json文件將添加到項目中：

{
  "version":"1.0.0",
  "name":"ASP.NET",
  "private":"true",
  "devDependencies": {
  }
}

在Visual Studio中打開文件後，能夠在編輯器中看到npm標誌，如圖40.6所示。

 

圖40.6

注意 單擊「顯示全部文件」按鈕時，解決方案資源管理器中才會顯示package.json文件。

當向此文件的devDependencies部分添加JavaScript庫，在鍵入時將鏈接npm服務器以容許完成JavaScript庫，並顯示可用的版本號。在編輯器中選擇版本號時，還能夠得到^和~的前綴。若是沒有前綴，從服務器檢索鍵入的確切名稱的庫的版本。^前綴檢索相同主版本號的最新庫，〜前綴檢索具備相同次要版本號的最新庫。下面的package.json文件引用了幾個gulp庫和rimraf庫。保存package.json文件時，將從服務器加載npm軟件包。在解決方案資源管理器中，能夠在「依賴關係」部分中查看npm加載的庫。 Dependencies部分有一個npm子節點，其中顯示全部已加載的庫。

{
  "version":"1.0.0",
  "name":"ASP.NET",
  "private":"true",
  "devDependencies": {
    "gulp":"3.9.0",
    "gulp-concat":"2.6.0",
    "gulp-cssmin":"0.1.7",
    "gulp-uglify":"1.2.0",
    "rimraf":"2.4.2"
  }
}

這些JavaScript庫引用有什麼用？ gulp是一個編譯系統，將在下一節中討論。 gulp-concat鏈接JavaScript文件；gulp-cssmin最小化CSS文件；gulp-uglify縮小JavaScript文件；而rimraf容許刪除層次結構中的文件，minification 刪除全部沒必要要的字符。

添加軟件包後，可使用解決方案資源管理器中「依賴項」部分中的npm節點輕鬆地更新或卸載軟件包。

使用gulp編譯

Gulp是JavaScript的編譯系統。npm相似於NuGet，而 gulp 相似於.NET開發實用程序（DNU）。既然 JavaScript代碼被解析，爲何還須要一個使用JavaScript的編譯系統？在將HTML，CSS和JavaScript這些文件放到服務器上以前，有不少工做要作。編譯系統能夠將Syntactically Awesome Stylesheets（SASS）文件（具備腳本功能的CSS）轉換爲CSS，同時能夠縮小和壓縮文件，還能夠啓動腳本的單元測試，而且能夠分析JavaScript代碼（例如， JSHint） - 有不少有用的任務能夠作。

用npm添加gulp以後，可使用Visual Studio項目模板添加"Gulp Configuration File"。此模板建立如下gulp文件（代碼文件MVCSampleApp/gulpfile.js）：

/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var gulp = require('gulp');
gulp.task('default', function () {
    // place code for your default task here
});

帶有gulp標誌的編輯器如圖40.7所示。

 

圖40.7

如今在gulp文件中添加一些任務。 第一行定義此文件的所需庫，並將變量分配給腳本。 這裏已經添加了npm的庫被會使用。 gulp.task函數建立gulp任務，可使用Visual Studio任務運行器瀏覽器啓動：

"use strict";
var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify")
var paths = {
    webroot:"./wwwroot/"
};
paths.js = paths.webroot +"js/**/*.js";
paths.minJs = paths.webroot +"js/**/*.min.js";
paths.css = paths.webroot +"css/**/*.css";
paths.minCss = paths.webroot +"css/**/*.min.css";
paths.concatJsDest = paths.webroot +"js/site.min.js";
paths.concatCssDest = paths.webroot +"css/site.min.css";
gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js","clean:css"]);
gulp.task("min:js", function () {
    gulp.src([paths.js,"!" + paths.minJs], { base:"." }) 
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
    gulp.src([paths.css,"!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});
gulp.task("min", ["min:js","min:css"]);

Visual Studio 2015爲gulp文件提供了一個任務運行器瀏覽器（見圖40.8）。雙擊任務以啓動它。還能夠將gulp任務映射到Visual Studio命令。這樣，當打開項目時，在編譯以前或以後，或者當在「編譯」菜單中選擇了「清理」菜單項時，gulp任務將自動啓動。

 

圖40.8

注意 Visual Studio支持的另外一個JavaScript編譯系統是Grunt。 Grunt的重點是經過配置來編譯，而Gulp的重點是經過JavaScript代碼編譯。

使用Bower客戶端庫

大多數客戶端的 JavaScript庫都經過 Bower 使用。 Bower是一個像 npm 的軟件包管理器。而 npm 項目從服務器端代碼的JavaScript庫開始（儘管許多客戶端腳本庫也可使用npm），Bower提供了成千上萬的JavaScript客戶端庫。Bower能夠經過使用項目模板 「Bower Configuration File」添加到ASP.NET Web項目。該模板添加的文件bower.json以下所示：

{
  "name":"ASP.NET",
  "private": true,
  "dependencies": {
  }
}

向項目添加Bower還會添加配置Bower的.bowerrc文件。 默認狀況下，使用目錄設置時腳本文件（以及腳本庫附帶的CSS和HTML文件）將複製到wwwroot/lib目錄：

{
"directory":"wwwroot/lib"
}

注意 與NPM相似，單擊解決方案資源管理器中的「顯示全部文件」按鈕，才能查看與bower相關的文件。

Visual Studio 2015對Bower有特殊支持。 圖40.9顯示了編輯器中的Bower圖標。

 

圖40.9

向bower.json文件添加腳本庫，能夠經過鍵入庫的名稱和版本號得到IntelliSense。 與npm相似，保存文件時將從服務器檢索庫，而且能夠在Dependencies文件夾中找到它們。 因爲.bowerrc中的配置，腳本庫中的文件被複制到wwwroot/lib文件夾（代碼文件MVCSampleApp/.bowerrc）：

{
  "name":"ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap":"3.3.5",
    "jquery":"2.1.4",
    "jquery-validation":"1.14.0",
    "jquery-validation-unobtrusive":"3.2.5"
  }
}

經過單擊應用程序上下文菜單「Manage Bower Packages」，能夠訪問的「Manage Bower Packages」工具管理Bower軟件包。這個工具很是相似於NuGet包管理器，使管理Bower軟件包變得輕鬆（見圖40.10）。 

圖40.10

基礎設施已經就位，如今是時候進入HTTP請求與應答了。

---------未完待續