ASP.NET Core MVC壓縮樣式、腳本及老是複製文件到輸出目錄

時間 2019-12-01

標籤 asp.net asp core mvc 壓縮樣式腳本老是複製文件輸出目錄欄目 ASP 简体版

原文原文鏈接

前言

在.NET Core以前對於壓縮樣式文件和腳本咱們可能須要藉助第三方工具來進行壓縮，但在ASP.NET MVC Core中則無需藉助第三方工具來完成，本節咱們來看看ASP.NET Core MVC爲咱們提供了哪些方便。css

自動壓縮樣式和腳本

當咱們在測試環境中確定不須要壓縮腳本的，若是一旦壓縮腳本的話，若在控制檯出現錯誤不利於咱們調試，可是在生產環境中咱們經過壓縮腳本或者樣式一來能夠減小傳輸流量，二來能夠加速頁面加載時間，換句話說，此時咱們須要測試環境和生產環境對應的原生版本和壓縮版本，那麼在ASP.NET Core MVC中該如何作呢？請往下看。html

咱們將腳本、樣式、圖片等一些靜態文件放在wwwroot網站目錄下，此時咱們首先須要添加bower.json文件來下載咱們所須要的的腳本以及版本，以下：jquery

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

當在此json文件中的一來節點添加咱們須要的腳本和樣式時，此時會將下載的腳本和樣式自動添加到網站目錄文件夾下以下json

固然咱們也能夠經過右鍵->管理Bower程序包來下載一樣會自動還原到網站目錄文件夾下。此時咱們想要的腳本和樣式等都有了，接下來則須要在視圖中引入腳本和樣式。在ASP.NET Core MVC中爲咱們提供了加載樣式和腳本的三種環境：Development、Staging、Production。Development即開發環境，Staging即發佈以前的測試版本，Production即發佈版本。那麼咱們在視圖中該如何去使用呢？咱們經過environment節點上的names來指定以上三個環境，以下：bootstrap

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

咱們看下頁面加載結果，是否如咱們指望那樣。app

有點小尷尬，全加載進來了，怎麼個狀況，結果發現還須要在頁面頂部添加TagHelper，以下：asp.net

@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程序包，以下：

更新

直接從以下地址下載Bundling and minification擴展便可，無需下載上述擴展

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

咱們在網站目錄文件夾下建立一個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目錄下看到咱們的文件，以下：

總結

本節咱們講述了在.NET Core中對腳本和樣式如何進行自動壓縮以及對文件如何進行自動複製到輸出目錄，算是項目當中的一點小小總結吧，但願對閱讀本文的你有所幫助。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。