這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹如何實(shí)現(xiàn)Core MVC壓縮樣式，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、溫宿網(wǎng)絡(luò)推廣、微信小程序、溫宿網(wǎng)絡(luò)營(yíng)銷(xiāo)、溫宿企業(yè)策劃、溫宿品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪(fǎng)、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供溫宿建站搭建服務(wù)，24小時(shí)服務(wù)熱線(xiàn)：13518219792，官方網(wǎng)址：www.cdcxhl.com

前言

在.NET Core之前對(duì)于壓縮樣式文件和腳本我們可能需要借助第三方工具來(lái)進(jìn)行壓縮，但在ASP.NET MVC Core中則無(wú)需借助第三方工具來(lái)完成，本節(jié)我們來(lái)看看ASP.NET Core MVC為我們提供了哪些方便。

自動(dòng)壓縮樣式和腳本

當(dāng)我們?cè)跍y(cè)試環(huán)境中肯定不需要壓縮腳本的，如果一旦壓縮腳本的話(huà)，若在控制臺(tái)出現(xiàn)錯(cuò)誤不利于我們調(diào)試，但是在生產(chǎn)環(huán)境中我們通過(guò)壓縮腳本或者樣式一來(lái)可以減少傳輸流量，二來(lái)可以加速頁(yè)面加載時(shí)間，換句話(huà)說(shuō)，此時(shí)我們需要測(cè)試環(huán)境和生產(chǎn)環(huán)境對(duì)應(yīng)的原生版本和壓縮版本，那么在ASP.NET Core MVC中該如何做呢？請(qǐng)往下看。

我們將腳本、樣式、圖片等一些靜態(tài)文件放在wwwroot網(wǎng)站目錄下，此時(shí)我們首先需要添加bower.json文件來(lái)下載我們所需要的的腳本以及版本，如下：

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
  "jquery": "2.2.3",
  "bootstrap": "3.3.6"
 }
}

當(dāng)在此json文件中的一來(lái)節(jié)點(diǎn)添加我們需要的腳本和樣式時(shí)，此時(shí)會(huì)將下載的腳本和樣式自動(dòng)添加到網(wǎng)站目錄文件夾下如下

當(dāng)然我們也可以通過(guò)右鍵->管理Bower程序包來(lái)下載同樣會(huì)自動(dòng)還原到網(wǎng)站目錄文件夾下。此時(shí)我們想要的腳本和樣式等都有了，接下來(lái)則需要在視圖中引入腳本和樣式。在ASP.NET Core MVC中為我們提供了加載樣式和腳本的三種環(huán)境：Development、Staging、Production。Development即開(kāi)發(fā)環(huán)境，Staging即發(fā)布之前的測(cè)試版本，Production即發(fā)布版本。那么我們?cè)谝晥D中該如何去使用呢？我們通過(guò)environment節(jié)點(diǎn)上的names來(lái)指定以上三個(gè)環(huán)境，如下：

 ..開(kāi)發(fā)環(huán)境-加載腳本和樣式



 ..準(zhǔn)備和發(fā)布環(huán)境-加載腳本和樣式

我們實(shí)際操作來(lái)看下是怎樣的，如下加載JQuery腳本和Bootstrap樣式，如下：

我們看下頁(yè)面加載結(jié)果，是否如我們期望那樣。

有點(diǎn)小尷尬，全加載進(jìn)來(lái)了，怎么個(gè)情況，結(jié)果發(fā)現(xiàn)還需要在頁(yè)面頂部添加TagHelper，如下：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

這下沒(méi)毛病，在此之前我們還未說(shuō)明一點(diǎn)，我們?cè)趀nvironment節(jié)點(diǎn)上的names設(shè)置的值，ASP.NET MVC Core是如何檢測(cè)到的呢？我們需要在launchSettings.json中下的Profiles節(jié)點(diǎn)中指定環(huán)境，如下：

"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"
   }
  }
 }

此時(shí)我們?cè)谶\(yùn)行application時(shí)看到如下我們?cè)O(shè)置的運(yùn)行環(huán)境。

此時(shí)又有同學(xué)問(wèn)了，我們?cè)?NET Core之前可以手動(dòng)寫(xiě)代碼來(lái)實(shí)現(xiàn)加載腳本和樣式的版本，在ASP.NET Core MVC中能實(shí)現(xiàn)么，既然說(shuō)到這里了，當(dāng)然是可以的，如下。

是不是很美妙，自從有了.NET Core，我們只需要添加asp-append-version="true"屬性，.NET Core自動(dòng)幫我們完成了添加版本控制，頓時(shí)神清氣爽啊。講到這里，算是講完自動(dòng)壓縮腳本和樣式的一大半了，但是，但是不知道看完到這里的你發(fā)現(xiàn)么有，我們是添加的程序包，都是自動(dòng)帶了壓縮版本的，那么要是當(dāng)我們自己寫(xiě)腳本和樣式后，我們?cè)撊绾螇嚎s腳本和樣式了，請(qǐng)繼續(xù)往下看。

在手動(dòng)寫(xiě)我們自己的腳本和樣式時(shí)之前，我們需要在程序包中搜索Web Essentials程序包并安裝，我已經(jīng)安裝完畢，在擴(kuò)展和更新中可以看到Web Essentials程序包，如下：

我們?cè)诰W(wǎng)站目錄文件夾下創(chuàng)建一個(gè)js文件夾并添加JeffckyWang.js的腳本，在里面我們給出如下腳本：

(function ($) {
  "use strict";
   alert("學(xué)習(xí)自動(dòng)壓縮腳本和樣式");
})(jQuery);

由于上述我們已經(jīng)添加了Web Essentials程序包此時(shí)我們右鍵JeffckyWang.js腳本，你會(huì)發(fā)現(xiàn)有了自動(dòng)壓縮的菜單，如下：

當(dāng)進(jìn)行壓縮后，我們展開(kāi)JeffckyWang.js腳本會(huì)有我們壓縮的JeffckyWang.min.js腳本，如下：

復(fù)制文件到輸出目錄

在.NET Core之前我們創(chuàng)建一個(gè)文件可以通過(guò)設(shè)置該文件的屬性來(lái)復(fù)制到bin目錄下的debug或者release目錄。例如我們創(chuàng)建一個(gè)install.bat文件，在.NET Core之前版本，我們可以手動(dòng)通過(guò)如下設(shè)置，如下：

此時(shí)我們?cè)O(shè)置為始終復(fù)制則將其復(fù)制到debug或者release目錄下。但是在.NET Core中其屬性卻是如下這樣的

在項(xiàng)目中遇到這個(gè)問(wèn)題瞬間懵逼了，想了想，既然在.NET Core一切基于配置，那么是否在project.json是否可以進(jìn)行一下配置即可呢，功夫不負(fù)有心人，進(jìn)行如下設(shè)置即可。

 "buildOptions": {
  "emitEntryPoint": true,
  "preserveCompilationContext": true,
  "copyToOutput": [ "install.bat" ]
 },

我們只需要在buildOptions節(jié)點(diǎn)下添加一個(gè)copyToOutput節(jié)點(diǎn)，該節(jié)點(diǎn)為一個(gè)數(shù)組，添加我們對(duì)應(yīng)的文件路徑即可。此時(shí)重新生成一下則在debug或者release目錄下看到我們的文件，如下：

關(guān)于如何實(shí)現(xiàn)Core MVC壓縮樣式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。