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是如何檢測到的呢?我們需要在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中對腳本和樣式如何進行自動壓縮以及對文件如何進行自動復制到輸出目錄,算是項目當中的一點小小總結吧,希望對閱讀本文的你有所幫助。?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/282920.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/282920.shtml
英文地址,請注明出處:http://en.pswp.cn/news/282920.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

京東訂單自動評價方法

剛剛完成的一個京東自動訂單腳本, 以后還要加入其它京東自動的腳本項目地址: https://github.com/mm333444/aox_jd_auto_script 京東自動完成腳本 目前只完成京東訂單自動評價, 評價時會自動上傳商品圖片 一、安裝 1. 程序依賴 python3.52. 安裝配置 安裝pipenv安裝模塊 pipenv…

matlab空間散點擬合曲線,matlab離散點擬合曲線

matlab曲線擬合與數值點標注實例_工程科技_專業資料。實例 1: 現已知兩組...Matlab教程 曲線擬合工具箱 數學科學與技術學院 胡金燕 lionfr 曲線擬合定義 在實際工程應用和科學實踐中,經常需要尋求 兩個(或多個)變量間的關系,而......(p,x); %獲得x點處對相應的y值 plot(x,y,r*…

redis下并發問題解決方案

http://effective.blog.51cto.com/8296150/1671743 現在的計算機大都是多核的cpu,意味著可以并行執行多個進程.如果這多個運行的進程對同一份數據進行讀寫操作,那么就有可能出現兩個或者多個進程讀到的都是老的數據,這種情況下,再進行寫入操作之后就會有一些進程寫入的數據被覆…

宜建立自主可控的車用芯片和操作系統技術體系

萬物互聯時代&#xff0c;操作系統的邊界在不斷突破&#xff0c;面向“人機物”融合的泛在計算場景&#xff0c;能夠支撐分布式人機物協同應用的操作系統將是產業未來之光。操作系統在經過主機時代、PC互聯時代、移動互聯時代之后&#xff0c;來到萬物互聯時代&#xff0c;這恰…

Java 9進入第一輪問題修復階段

Java 9功能特性正式完成&#xff0c;這意味著第一個問題修復階段已經開始。HTTP/2客戶端沒有在截止日期前完成&#xff0c;現已降級為孵化器功能。由于現在的目標是在7月準備好可發布的Java 9&#xff0c;所以目前不太可能添加任何新的JEP。\\InfoQ此前的報道中提到&#xff0c…

django 用戶管理(1)

編輯了前端的頁面展示&#xff0c;用的bootstrap 用戶登錄 用戶信息 用戶編輯 創建用戶 修改密碼 轉載于:https://blog.51cto.com/jacksoner/2133129

qiaoye.php,全自動無限生成關鍵詞頁面(黑帽SEO優化終極方法)

如果你是做黑帽SEO的&#xff0c;如果你還停留在用欄目、租域名、劫持等手段來做黑帽SEO優化&#xff0c;我可以肯定的告訴你&#xff0c;你做的再好&#xff0c;也賺不了多少。那么今天咱們要說的就是無限生成關鍵詞頁面用內容頁來做黑帽SEO優化。這是我在演示的時候做的一個站…

AR Software

... 轉載于:https://www.cnblogs.com/2008nmj/p/7264769.html

v1.0.25 新版發布及Smart Meetup重新開啟丨SmartIDE

作者&#xff1a;徐磊文章首發地址&#xff1a;https://smartide.cn/zh/blog/2022-0892-sprint25/關于SmartIDESmartIDE是一群開發者為所有開發者開發的開源云原生IDE&#xff0c;我們的使命是“為開發者賦予云原生的超能力”&#xff01;使用SmartIDE你只需要學會一個簡單的指…

線程安全的單例模式

面試的時候&#xff0c;常常會被問到這樣一個問題&#xff1a;請您寫出一個單例模式&#xff08;Singleton Pattern&#xff09;吧。好吧&#xff0c;寫就寫&#xff0c;這還不容易。順手寫一個&#xff1a; public final class EagerSingleton { private static EagerSi…

vue實現首屏加載等待動畫 避免首次加載白屏尷尬

為什么80%的碼農都做不了架構師&#xff1f;>>> 0 直接上效果圖 1背景&#xff0c;用戶體驗良好一直是個重要的問題。 2怎么加到自己項目里面&#xff1f; 復制css html代碼到自己的index.html即可 代碼鏈接 源碼地址 Vue學習前端群493671066&#xff0c;美女多多。…

java-回調機制詳解

轉&#xff1a;http://blog.csdn.net/llayjun/article/details/50454148 閱讀目錄 一、前言二、回調的含義和用途三、Java實現接口回調 四、Android中的接口回調五、參考資料一、前言 最近在看android fragment與Activity進行數據傳遞的部分&#xff0c;看到了接口回調的內容&a…

lfi讀取php,php LFI讀php文件源碼以及直接post webshell

php LFI讀php文件源碼以及間接post 網站shell假如如下一個場景(&#xff11;) http://vulnerable/fileincl/example&#xff11;.php?pageintro.php(該php文件包孕LFI漏洞)(&#xff12;) 然而你不有中央能夠upload你的網站shell代碼(三) LFI只能讀取到非php文件的源碼(由于無…

根據請求上下文動態設置靜態文件存儲目錄

前言上次&#xff0c;我們實現了根據 subpath 特定格式《動態設置靜態文件存儲目錄》。例如&#xff1a;subpath靜態文件路徑/userAId/1.jpgc:\abc\userAId\1.jpg/userBId/1.jpgd:\xyz\123\userBId\1.jpg但是&#xff0c;如果 subpath 不能有這種特定格式&#xff0c;只能用通用…

BZOJ3019 : [Balkan2012]handsome

首先預處理出$f[i][j][k]$表示長度為$i$的序列&#xff0c;第一個位置是$j$&#xff0c;最后一個位置是$k$時合法的方案數。 從后往前枚舉LCP以及那個位置應該改成什么。 用線段樹維護區間內最左最右的已經確定的位置&#xff0c;以及區間內的合法方案數。 合并的時候只需要將左…

php smarty入門,smarty 快速入門

smarty 快速入門smarty定義:一個開源的模板引擎模板引擎是為了使用戶界面與業務數據分離而產生的&#xff0c;它可以生成特定格式的文檔&#xff0c;用于網站的模板引擎就會生成一個標準的HTML文檔。功能將網站的數據和網站的界面實現分離(php和html代碼)緩存頁面下載www.smart…

ImageView的scaleType理解

2019獨角獸企業重金招聘Python工程師標準>>> 1.android:scaleType“center” 保持原圖的大小&#xff0c;顯示在ImageView的中心。當原圖的size大于ImageView的size時&#xff0c;多出來的部分被截掉。 2.android:scaleType“center_inside” 以原圖正常顯示為目的&…

第一章 引論

1、什么是多道程序設計&#xff1f; 即內存中同時運行多道獨立程序&#xff0c;宏觀上所有程序同時運行&#xff0c;微觀上程序串行&#xff0c;多道程序輪流占用CPU&#xff0c;提高了資源利用率。 2、什么是SPOOLING&#xff1f;讀者是否認為將來的高級個人計算機會把SPOOLIN…

《ASP.NET Core 6框架揭秘》實例演示[24]:中間件的多種定義方式

ASP.NET Core的請求處理管道由一個服務器和一組中間件組成&#xff0c;位于 “龍頭” 的服務器負責請求的監聽、接收、分發和最終的響應&#xff0c;針對請求的處理由后續的中間件來完成。中間件最終體現為一個Func<RequestDelegate, RequestDelegate>委托&#xff0c;但…

Android之 RecyclerView,CardView 詳解和相對應的上拉刷新下拉加載

為什么80%的碼農都做不了架構師&#xff1f;>>> 隨著 Google 推出了全新的設計語言 Material Design&#xff0c;還迎來了新的 Android 支持庫 v7&#xff0c;其中就包含了 Material Design 設計語言中關于 Card 卡片概念的實現 —— CardView。RecyclerView也是谷…