关于Core MVC压缩样式的实例详解（ASP）-C#.Net教程-PHP中文网

首页

后端开发

C#.Net教程

关于Core MVC压缩样式的实例详解（ASP）

Y2J

May 05, 2017 pm 01:56 PM

asp.net core mvc

这篇文章主要介绍了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程序包，如下：

我们在网站目录文件夹下创建一个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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何在 Windows 11 中启用 Core Isolation 的内存完整性功能 May 10, 2023 pm 11:49 PM

Microsoft的Windows112022Update(22H2)默认启用CoreIsolation的内存完整性保护。但是，如果您运行的是旧版本的操作系统，例如Windows112022Update(22H1)，则需要手动打开此功能。在Windows11中开启CoreIsolation的内存完整性功能对于不了解核心隔离的用户，这是一个安全过程，旨在通过将Windows上的基本核心活动隔离在内存中来保护它们免受恶意程序的侵害。该进程与内存完整性功能相结合，可确保

电脑core是什么意思 Sep 05, 2022 am 11:24 AM

电脑中core有两种意思：1、核心，也即内核，是CPU最重要的组成部分，CPU所有的计算、接受存储命令、处理数据都由核心执行；2、酷睿，core是英特尔的处理器名称，酷睿是英特尔公司继奔腾处理器之后推出的处理器品牌，目前已经发布了十二代酷睿处理器。

PHP MVC 架构：构建面向未来的 Web 应用程序 Mar 03, 2024 am 09:01 AM

引言在当今快速发展的数字世界中，构建健壮、灵活且可维护的WEB应用程序至关重要。PHPmvc架构提供了实现这一目标的理想解决方案。MVC（模型-视图-控制器）是一种广泛使用的设计模式，可以将应用程序的各个方面分离为独立的组件。MVC架构的基础MVC架构的核心原理是分离关注点：模型：封装应用程序的数据和业务逻辑。视图：负责呈现数据并处理用户交互。控制器：协调模型和视图之间的交互，管理用户请求和业务逻辑。PHPMVC架构phpMVC架构遵循传统MVC模式，但也引入了语言特定的功能。以下是PHPMVC

如何修复 Windows 11 / 10 中的处理器热跳闸错误 [修复] Apr 17, 2023 am 08:13 AM

大多数设备（例如笔记本电脑和台式机）长期被年轻游戏玩家和编码人员频繁使用。由于应用程序过载，系统有时会挂起。这使用户被迫关闭他们的系统。这主要发生在安装和玩重度游戏的玩家身上。当系统在强制关闭后尝试启动时，它会在黑屏上抛出一个错误，如下所示：以下是在此引导期间检测到的警告。这些可以在事件日志页面的设置中查看。警告：处理器热跳闸。按任意键继续。..当台式机或笔记本电脑的处理器温度超过其阈值温度时，总是会抛出这些类型的警告消息。下面列出了在Windows系统上发生这种情况的原因。许多繁重的应用程序在

PHP MVC 架构的进阶指南：解锁高级功能 Mar 03, 2024 am 09:23 AM

mvc架构（模型-视图-控制器）是PHP开发中最流行的模式之一，因为它为组织代码和简化WEB应用程序的开发提供了清晰的结构。虽然基本的MVC原理对于大多数Web应用程序来说已经足够，但对于需要处理复杂数据或实现高级功能的应用程序，它存在一些限制。分离模型层分离模型层是高级MVC架构中常见的一种技术。它涉及将模型类分解为更小的子类，每个子类专注于特定功能。例如，对于一个电子商务应用程序，您可以将主模型类分解为订单模型、产品模型和客户模型。这种分离有助于提高代码的可维护性和可重用性。使用依赖注入依赖

如何使用PHP实现MVC模式 Jun 07, 2023 pm 03:40 PM

MVC(Model-View-Controller)模式是一种常用的软件设计模式，可以帮助开发人员更好地组织和管理代码。MVC模式将应用程序分为三部分：模型（Model）、视图（View）和控制器（Controller），每个部分都有自己的角色和职责。在本文中，我们将讨论如何使用PHP实现MVC模式。模型（Model）模型代表应用程序的数据和数据处理。通常，

.NET Core跨平台应用开发实战：从Windows到Linux与macOS的无缝之旅 Feb 26, 2024 pm 12:55 PM

随着.NETCore的推出，.NET开发者迎来了全新的机遇，可以在多个操作系统上轻松编写和运行.NET应用程序。本文将深入探讨如何利用.NETCore实现跨平台应用开发，并分享在Windows、Linux和macOS等操作系统上的最佳实践经验。一、准备开发环境要开始跨平台应用开发，首先需要为每个目标平台准备好开发环境。Windows在Windows上，你可以通过VisualStudio来安装.NETCoreSDK。安装完成后，你可以通过VisualStudio创建和运行.NETCore项目。Li

揭秘SpringMVC框架的成功：它为何广受欢迎 Jan 24, 2024 am 08:39 AM

SpringMVC框架解密：为什么它如此受欢迎，需要具体代码示例引言：在当今的软件开发领域中，SpringMVC框架已经成为开发者非常喜爱的一种选择。它是基于MVC架构模式的Web框架，提供了灵活、轻量级、高效的开发方式。本文将深入探讨SpringMVC框架的魅力所在，并通过具体的代码示例来展示其强大之处。一、SpringMVC框架的优势灵活的配置方式Spr

See all articles

关于Core MVC压缩样式的实例详解（ASP）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题