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目录下看到我们的文件，如下：

总结

本节我们讲述了在.NET Core中对脚本和样式如何进行自动压缩以及对文件如何进行自动复制到输出目录，算是项目当中的一点小小总结吧，希望对阅读本文的你有所帮助。

赞 (0)

相关推荐

  • Visual Studio ASP.NET Core MVC入门教程第一篇

    Visual Studio ASP.NET Core MVC入门教程第一篇

    ASP.NET Core MVC入门教程第一节课,具体内容如下 1.开始环境 visual studio 2017 社区版或其他版本.安装时勾选"Web和云"组中的"ASP.NET及网页开发"项和"其他工具"组中的".NET Core平台开发"项. 2.创建一个网页应用 (1)在 Visual Studio中, select 文件 >新建 >项目. (2) 在"新项目"对话框中的左面板中,点击&

  • asp.net core项目mvc权限控制：分配权限

    asp.net core项目mvc权限控制：分配权限

    前面的文章介绍了如何进行权限控制,即访问控制器或者方法的时候,要求当前用户必须具备特定的权限,但是如何在程序中进行权限的分配呢?下面就介绍下如何利用Microsoft.AspNetCore.Identity.EntityFrameworkCore框架进行权限分配. 在介绍分配方法之前,我们必须理解权限关系,这里面涉及到三个对象:用户,角色,权限,权限分配到角色,角色再分配到用户,当某个用户属于某个角色后,这个用户就具有了角色所包含的权限列表,比如现在有一个信息管理员角色,这个角色包含了信息删除权

  • asp.net core mvc实现伪静态功能

    在大型网站系统中,为了提高系统访问性能,往往会把一些不经常变得内容发布成静态页,比如商城的产品详情页,新闻详情页,这些信息一旦发布后,变化的频率不会很高,如果还采用动态输出的方式进行处理的话,肯定会给服务器造成很大的资源浪费.但是我们又不能针对这些内容都独立制作静态页,所以我们可以在系统中利用伪静态的方式进行处理,至于什么是伪静态,大家可以百度下.我们这里就来介绍一下,在asp.net core mvc中实现伪静态的方式. mvc框架中,view代表的是视图,它执行的结果就是最终输出到客户端浏览

  • ASP.NET Core中使用默认MVC路由的配置

    ASP.NET Core中使用默认MVC路由的配置

    ASP.NET Core里Route这块的改动不大,只是一些用法上有了调整,提供了一些更加简洁的语法. 而对于自定义路由的支持当然也是没有问题的,这个功能应该是从MVC1.0版本就已经有这个功能. 先看看ASP.NET Core里面实现默认MVC路由的配置方式 通常情况下,在使用MVC项目的时候,默认的路由就足够了,就是常见的通过Controller和Action获取具体的方法的方式. 从一个最基本的项目开始,执行以下步骤,就可以使得项目支持MVC路由 1.创建一个空白的ASP.NET Core

  • Asp.net Core MVC中怎么把二级域名绑定到特定的控制器上

    应用场景:企业门户网站会根据内容不同,设置不同的板块,如新浪有体育,娱乐频道,等等.有的情况下需要给不同的板块设置不同的二级域名,如新浪体育sports.sina.com.cn. 在asp.net core mvc中,如果要实现板块的效果,可能会给不同的板块建立不同的控制器(当然也有其他的技术,这里不讨论实现方式的好坏),在这种情况下,如何给控制器绑定上独有的二级域名,比如体育频道对应的控制器叫SportController,通过sports.XXX.com域名访问系统的时候,直接进入Sport

  • ASP.NET Core MVC 配置全局路由前缀

    ASP.NET Core MVC 配置全局路由前缀 前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应用背景 不知道大家在做 Web Api 应用程序的时候,有没有遇到过这种场景,就是所有的接口都是以 /api 开头的,也就是我们的api 接口请求地址是像这样的: http://www.example.com/api/order/333 或者是这样的需求 http://www.exa

  • asp.net core mvc实现文件上传实例

    工作用到文件上传的功能,在这个分享下 ~~ Controller: public class PictureController : Controller { private IHostingEnvironment hostingEnv; public PictureController(IHostingEnvironment env) { this.hostingEnv = env; } // GET: /<controller>/ public IActionResult Index()

  • 解决ASP.NET Core Mvc文件上传限制问题实例

    一.简介 在ASP.NET Core MVC中,文件上传的最大上传文件默认为20MB,如果我们想上传一些比较大的文件,就不知道怎么去设置了,没有了Web.Config我们应该如何下手呢? 二.设置上传文件大小 1.应用程序级别设置 我们需要在 ConfigureServices方法中添加如下代码,设置文件上传的大小限制为60 MB. public void ConfigureServices(IServiceCollection services) { servicesConfigure<For

  • ASP.NET Core MVC压缩样式、脚本详解

    ASP.NET Core MVC压缩样式、脚本详解

    前言 在.NET Core之前对于压缩样式文件和脚本我们可能需要借助第三方工具来进行压缩,但在ASP.NET MVC Core中则无需借助第三方工具来完成,本节我们来看看ASP.NET Core MVC为我们提供了哪些方便. 自动压缩样式和脚本 当我们在测试环境中肯定不需要压缩脚本的,如果一旦压缩脚本的话,若在控制台出现错误不利于我们调试,但是在生产环境中我们通过压缩脚本或者样式一来可以减少传输流量,二来可以加速页面加载时间,换句话说,此时我们需要测试环境和生产环境对应的原生版本和压缩版本,那么

  • 如何使用Rotativa在ASP.NET Core MVC中创建PDF详解

    如何使用Rotativa在ASP.NET Core MVC中创建PDF详解

    前言 在本文中,我们将学习如何使用Rotativa.AspNetCore工具从ASP.NET Core中的视图创建PDF.如果您使用ASP.NET MVC,那么Rot​​ativa工具已经可用,我们可以使用它来生成pdf. 创建一个MVC项目,无论您是core或不core,都可以nuget下包.命令如下: Install-Package Rotativa #或者 Install-Package Rotativa.AspNetCore 这个工具由意大利人Giorgio Bozio创建.他需要在AS

  • [译]ASP.NET Core 2.0 路由引擎详解

    [译]ASP.NET Core 2.0 路由引擎详解

    本文介绍了ASP.NET Core 2.0 路由引擎详解,分享给大家,具体如下: 问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvir

  • ASP.NET Core中如何实现重定向详解

    ASP.NET Core中如何实现重定向详解

    前言 ASP.NET Core 是一个跨平台,开源的,轻量级的,模块化的,用于构建高性能的 web 开发框架, ASP.NET Core MVC 内置了多种方式将一个 request 请求跳转到指定的url,这篇文章我们就来讨论如何去实现. 理解 RedirectActionResult ASP.NET Core MVC 中内置了几种 Redirect,比如说:RedirectResult, RedirectToActionResult, RedirectToRouteResult 和 Loca

  • CSRF在ASP.NET Core中的处理方法详解

    前言 前几天,有个朋友问我关于AntiForgeryToken问题,由于对这一块的理解也并不深入,所以就去研究了一番,梳理了一下. 在梳理之前,还需要简单了解一下背景知识. AntiForgeryToken 可以说是处理/预防CSRF的一种处理方案. 那么什么是CSRF呢? CSRF(Cross-site request forgery)是跨站请求伪造,也被称为One Click Attack或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用. 简单理解的话

  • ASP.NET Core缓存静态资源示例详解

    背景 缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能.在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间.在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件. 虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序.当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件. 方案: 为确保用户始终使用最新版本的文件,我们必须为每个文件版本提供一个唯一的URL.有很多策略: 使用

  • ASP.NET Core自定义中间件的方式详解

    ASP.NET Core自定义中间件的方式详解

    目录 1.委托形式 2.强类型中间件 2.1.定义中间件的依赖 2.2.定义中间件类型 3.基于约定的中间件 3.1.约定规则 3.2.应用实现 总结 ASP.NET Core应用本质上,其实就是由若干个中间件构建成的请求处理管道.管道相当于一个故事的框架,而中间件就相当于故事中的某些情节.同一个故事框架采用不同的情节拼凑,最终会体现出不同风格的故事.而我们的ASP.NET Core应用也正是如此,同一管道采用不同的中间件组合,最终也会呈现出不同的应用形态. 从上述的概念种可以看出,中间件在AS

  • ASP.NET Core Middleware的实现方法详解

    ASP.NET Core Middleware的实现方法详解

    概念 ASP.NET Core Middleware是在应用程序处理管道pipeline中用于处理请求和操作响应的组件. 每个组件: 在pipeline中判断是否将请求传递给下一个组件 在处理管道的下个组件执行之前和之后执行一些工作, HttpContxt对象能跨域请求.响应的执行周期 特性和行为 ASP.NET Core处理管道由一系列请求委托组成,一环接一环的被调用, 下面给出自己绘制的Middleware pipeline流程图: 从上图可以看出,请求自进入处理管道,经历了四个中间件,每个

  • ASP.NET Core 中的Main方法详解

    在 ASP.NET Core 项目中,我们有一个名为Program.cs的文件.在这个文件中,我们有一个public static void Main()方法 . public class Program { public static void Main(string[] args) { CreateWebHostBuilder(args).Build().Run(); } public static IWebHostBuilder CreateWebHostBuilder(string[]

  • asp.net中MVC的处理流程详解

    asp.net中MVC的处理流程详解

    asp.net MVC 分为主要的Controller .Action.以及Views 下面来分析Asp.net MVC的处理流程: Controller 负责将获取Model数据并将Model传递个View对象,通知View对象显示. 处理流程: 1.用户发起请求--->UrlRouting获取请求—>MvcRouteHandler.GetHttpHandler()—>MvcHandler.ProcessRequest() 2.UrlRouting获取浏览器发起的请求 将RoutDat

随机推荐