快捷導(dǎo)航

ASP.NET Core MVC壓縮樣式、腳本詳解

更新時(shí)間：2017年02月02日 16:52:31 投稿：hebedich

這篇文章主要介紹了ASP.NET Core MVC壓縮樣式、腳本詳解的相關(guān)資料,需要的朋友可以參考下

前言

在.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)境中肯定不需要壓縮腳本的，如果一旦壓縮腳本的話，若在控制臺(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)站目錄文件夾下如下

當(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é)果，是否如我們期望那樣。

有點(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)寫代碼來(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>

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

在手動(dòng)寫我們自己的腳本和樣式時(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目錄下看到我們的文件，如下：

總結(jié)

本節(jié)我們講述了在.NET Core中對(duì)腳本和樣式如何進(jìn)行自動(dòng)壓縮以及對(duì)文件如何進(jìn)行自動(dòng)復(fù)制到輸出目錄，算是項(xiàng)目當(dāng)中的一點(diǎn)小小總結(jié)吧，希望對(duì)閱讀本文的你有所幫助。

您可能感興趣的文章: