溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

發(fā)布時(shí)間：2020-12-09 17:24:12 來(lái)源：億速云 閱讀：252 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

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

當(dāng)我們?cè)跍y(cè)試環(huán)境中肯定不需要壓縮腳本的，如果一旦壓縮腳本的話，若在控制臺(tái)出現(xiàn)錯(cuò)誤不利于我們調(diào)試，但是在生產(chǎn)環(huán)境中我們通過(guò)壓縮腳本或者樣式一來(lái)可以減少傳輸流量，二來(lái)可以加速頁(yè)面加載時(shí)間，換句話說(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)站目錄文件夾下如下

ASP.NET Core MVC中的自動(dò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)境，如下：

<environment names="Development">
 ..開(kāi)發(fā)環(huán)境-加載腳本和樣式
</environment>


<environment names="Staging,Production">
 ..準(zhǔn)備和發(fā)布環(huán)境-加載腳本和樣式
</environment>

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

<html>
<head>
  <title>學(xué)習(xí)加載腳本和樣式</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>

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

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

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

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

這下沒(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)境。

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

此時(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)然是可以的，如下。

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

ASP.NET Core MVC中的自動(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程序包，如下：

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

我們?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)壓縮的菜單，如下：

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

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

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

復(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è)置，如下：

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

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

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

在項(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目錄下看到我們的文件，如下：

ASP.NET Core MVC中的自動(dòng)壓縮樣式是什么

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手