搜尋

首頁 >後端開發 >C#.Net教程 >關於Core MVC壓縮樣式的實例詳解（ASP）

關於Core MVC壓縮樣式的實例詳解（ASP）

Y2J
Y2J原創
2017-05-05 13:56:151601瀏覽

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

##前言

#在. 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是如何偵測到的呢？我們需要在launch

Settings.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基础视频教程

以上是關於Core MVC壓縮樣式的實例詳解（ASP）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：關於repeater和分頁效果的程式碼詳解（ASP）下一篇：關於repeater和分頁效果的程式碼詳解（ASP）

相關文章

看更多