前言
在.NET Core之前對於壓縮樣式檔案和指令碼我們可能需要藉助第三方工具來進行壓縮，但在ASP.NET MVC Core中則無需藉助第三方工具來完成，本節我們來看看ASP.NET Core MVC為我們提供了哪些方便。
自動壓縮樣式和指令碼
當我們在測試環境中肯定不需要壓縮指令碼的，如果一旦壓縮指令碼的話，若在控制台出現錯誤不利於我們調試，但是在生產環境中我們通過壓縮指令碼或者樣式一來可以減少傳輸串流量，二來可以加速頁面載入時間，換句話說，此時我們需要測試環境和生產環境對應的原生版本和壓縮版本，那麼在ASP.NET Core MVC中該如何做呢？請往下看。
我們將指令碼、樣式、圖片等一些靜態檔案放在wwwroot網站目錄下，此時我們首先需要添加bower.json檔案來下載我們所需要的的指令碼以及版本，如下：
{ "name": "asp.net", "private": true, "dependencies": { "jquery": "2.2.3", "bootstrap": "3.3.6" }}
當在此json檔案中的一來節點添加我們需要的指令碼和樣式時，此時會將下載的指令碼和樣式自動添加到網站目錄檔案夾下如下
當然我們也可以通過右鍵->管理Bower程式包來下載同樣會自動還原到網站目錄檔案夾下。此時我們想要的指令碼和樣式等都有了，接下來則需要在視圖中引入指令碼和樣式。在ASP.NET Core MVC中為我們提供了載入樣式和指令碼的三種環境：Development、Staging、Production。Development即開發環境，Staging即發布之前的測試版本，Production即發布版本。那麼我們在視圖中該如何去使用呢？我們通過environment節點上的names來指定以上三個環境，如下：
<environment names="Development"> ..開發環境-載入指令碼和樣式</environment><environment names="Staging,Production"> ..準備和發布環境-載入指令碼和樣式</environment>
我們實際操作來看下是怎樣的，如下載入JQuery指令碼和Bootstrap樣式，如下：
<html><head> <title>學習載入指令碼和樣式</title></head><body></body></html><environment names="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/tether/dist/js/tether.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /></environment><environment names="Staging,Production"> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/tether/dist/js/tether.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script> <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /></environment>
我們看下頁面載入結果，是否如我們期望那樣。
有點小尷尬，全載入進來了，怎麼個情況，結果發現還需要在頁面頂部添加TagHelper，如下：
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
這下沒毛病，在此之前我們還未說明一點，我們在environment節點上的names設定的值，ASP.NET MVC Core是如何檢測到的呢？我們需要在launchSettings.json中下的Profiles節點中指定環境，如下：
"profiles": { "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "launchUrl": "Home/Index", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "IIS Express (Production)": { "commandName": "IISExpress", "launchUrl": "Home/Index", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Production" } } }
此時我們在運行application時看到如下我們設定的運行環境。
此時又有同學問了，我們在.NET Core之前可以手動寫代碼來實現載入指令碼和樣式的版本，在ASP.NET Core MVC中能實現麼，既然說到這裡了，當然是可以的，如下。
<environment names="Staging,Production"> <script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script> <script src="~/lib/tether/dist/js/tether.min.js" asp-append-version="true"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-append-version="true"></script> <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-append-version="true" rel="stylesheet" /></environment>
是不是很美妙，自從有了.NET Core，我們只需要添加asp-append-version="true"屬性，.NET Core自動幫我們完成了添加版本控制，頓時神清氣爽啊。講到這裡，算是講完自動壓縮指令碼和樣式的一大半了，但是，但是不知道看完到這裡的你發現麼有，我們是添加的程式包，都是自動帶了壓縮版本的，那麼要是當我們自己寫指令碼和樣式後，我們該如何壓縮指令碼和樣式了，請繼續往下看。
在手動寫我們自己的指令碼和樣式時之前，我們需要在程式包中搜尋Web Essentials程式包並安裝，我已經安裝完畢，在擴充和更新中可以看到Web Essentials程式包，如下：
我們在網站目錄檔案夾下建立一個js檔案夾並添加JeffckyWang.js的指令碼，在裡面我們給出如下指令碼：
(function ($) { "use strict"; alert("學習自動壓縮指令碼和樣式");})(jQuery);
由於上述我們已經添加了Web Essentials程式包此時我們右鍵JeffckyWang.js指令碼，你會發現有了自動壓縮的菜單，如下：
當進行壓縮後，我們展開JeffckyWang.js指令碼會有我們壓縮的JeffckyWang.min.js指令碼，如下：
複製檔案到輸出目錄
在.NET Core之前我們建立一個檔案可以通過設定該檔案的屬性來複製到bin目錄下的debug或者release目錄。例如我們建立一個install.bat檔案，在.NET Core之前版本，我們可以手動通過如下設定，如下：
此時我們設定為始終複製則將其複製到debug或者release目錄下。但是在.NET Core中其屬性卻是如下這樣的
在項目中遇到這個問題瞬間懵逼了，想了想，既然在.NET Core一切基於配置，那麼是否在project.json是否可以進行一下配置即可呢，功夫不負有心人，進行如下設定即可。
"buildOptions": { "emitEntryPoint": true, "preserveCompilationContext": true, "copyToOutput": [ "install.bat" ] },
我們只需要在buildOptions節點下添加一個copyToOutput節點，該節點為一個數組，添加我們對應的檔案路徑即可。此時重建一下則在debug或者release目錄下看到我們的檔案，如下：
【相關推薦】
1. ASP免費視頻教程
2. ASP教程
3. 李炎恢ASP基礎視頻教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
