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

首页

后端开发

C#.Net教程

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

Y2J

May 05, 2017 pm 01:56 PM

asp.netcoremvc

这篇文章主要介绍了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

.NET中的C＃代码：探索编程过程Apr 12, 2025 am 12:02 AM

C#在.NET中的编程过程包括以下步骤：1)编写C#代码，2)编译为中间语言（IL），3)由.NET运行时（CLR）执行。C#在.NET中的优势在于其现代化语法、强大的类型系统和与.NET框架的紧密集成，适用于从桌面应用到Web服务的各种开发场景。

C＃.NET：探索核心概念和编程基础知识Apr 10, 2025 am 09:32 AM

C#是一种现代、面向对象的编程语言，由微软开发并作为.NET框架的一部分。1.C#支持面向对象编程（OOP），包括封装、继承和多态。2.C#中的异步编程通过async和await关键字实现，提高应用的响应性。3.使用LINQ可以简洁地处理数据集合。4.常见错误包括空引用异常和索引超出范围异常，调试技巧包括使用调试器和异常处理。5.性能优化包括使用StringBuilder和避免不必要的装箱和拆箱。

测试C＃.NET应用程序：单元，集成和端到端测试Apr 09, 2025 am 12:04 AM

C#.NET应用的测试策略包括单元测试、集成测试和端到端测试。1.单元测试确保代码的最小单元独立工作，使用MSTest、NUnit或xUnit框架。2.集成测试验证多个单元组合的功能，常用模拟数据和外部服务。3.端到端测试模拟用户完整操作流程，通常使用Selenium进行自动化测试。

高级C＃.NET教程：ACE您的下一次高级开发人员面试Apr 08, 2025 am 12:06 AM

C#高级开发者面试需要掌握异步编程、LINQ、.NET框架内部工作原理等核心知识。1.异步编程通过async和await简化操作，提升应用响应性。2.LINQ以SQL风格操作数据，需注意性能。3..NET框架的CLR管理内存，垃圾回收需谨慎使用。

C＃.NET面试问题和答案：提高您的专业知识Apr 07, 2025 am 12:01 AM

C#.NET面试问题和答案包括基础知识、核心概念和高级用法。1)基础知识：C#是微软开发的面向对象语言，主要用于.NET框架。2)核心概念：委托和事件允许动态绑定方法，LINQ提供强大查询功能。3)高级用法：异步编程提高响应性，表达式树用于动态代码构建。

使用C＃.NET建筑微服务：建筑师实用指南Apr 06, 2025 am 12:08 AM

C#.NET是构建微服务的热门选择，因为其生态系统强大且支持丰富。1)使用ASP.NETCore创建RESTfulAPI，处理订单创建和查询。2)利用gRPC实现微服务间的高效通信，定义和实现订单服务。3)通过Docker容器化微服务，简化部署和管理。

C＃.NET安全性最佳实践：防止常见漏洞Apr 05, 2025 am 12:01 AM

C#和.NET的安全最佳实践包括输入验证、输出编码、异常处理、以及身份验证和授权。1)使用正则表达式或内置方法验证输入，防止恶意数据进入系统。2)输出编码防止XSS攻击，使用HttpUtility.HtmlEncode方法。3)异常处理避免信息泄露，记录错误但不返回详细信息给用户。4)使用ASP.NETIdentity和Claims-based授权保护应用免受未授权访问。