這篇文章主要介紹了ASP.NET Core MVC壓縮樣式、腳本詳解的相關資料,需要的朋友可以參考下
##前言
#在. NET Core之前對於壓縮樣式檔案和腳本我們可能需要藉助第三方工具來進行壓縮,但在ASP.NET MVC Core中則無需借助第三方工具來完成,本節我們來看看ASP.NET Core MVC為我們提供了哪些方便性。自動壓縮樣式和腳本
當我們在測試環境中肯定不需要壓縮腳本的,如果一旦壓縮腳本的話,若在控制台出現錯誤不利於我們我們將腳本、樣式、圖片等一些靜態檔案放在wwwroot網站目錄下,此時我們首先需要新增bower.json檔案來下載我們所需要的腳本以及版本,如下:
{ "name": "asp.net", "private": true, "dependencies": { "jquery": "2.2.3", "bootstrap": "3.3.6" } }
<environment names="Development"> ..开发环境-加载脚本和样式 </environment> <environment names="Staging,Production"> ..准备和发布环境-加载脚本和样式 </environment>
<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>
@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" } } }
<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>
搜尋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中文網其他相關文章!