ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

时间：2023-02-08 09:58:24

前言

在.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文件中的一来节点添加我们需要的脚本和样式时，此时会将下载的脚本和样式自动添加到网站目录文件夹下如下

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

当然我们也可以通过右键->管理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>

我们看下页面加载结果，是否如我们期望那样。

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

有点小尴尬，全加载进来了，怎么个情况，结果发现还需要在页面顶部添加TagHelper，如下：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

这下没毛病，在此之前我们还未说明一点，我们在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时看到如下我们设置的运行环境。

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

此时又有同学问了，我们在.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>

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

是不是很美妙，自从有了.NET Core，我们只需要添加asp-append-version="true"属性，.NET Core自动帮我们完成了添加版本控制，顿时神清气爽啊。讲到这里，算是讲完自动压缩脚本和样式的一大半了，但是，但是不知道看完到这里的你发现么有，我们是添加的程序包，都是自动带了压缩版本的，那么要是当我们自己写脚本和样式后，我们该如何压缩脚本和样式了，请继续往下看。

在手动写我们自己的脚本和样式时之前，我们需要在程序包中搜索Web Essentials程序包并安装，我已经安装完毕，在扩展和更新中可以看到Web Essentials程序包，如下：

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

更新

直接从如下地址下载Bundling and minification扩展即可，无需下载上述扩展

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

我们在网站目录文件夹下创建一个js文件夹并添加JeffckyWang.js的脚本，在里面我们给出如下脚本：

(function ($) {

    "use strict";

     alert("学习自动压缩脚本和样式");

})(jQuery);

由于上述我们已经添加了Web Essentials程序包此时我们右键JeffckyWang.js脚本，你会发现有了自动压缩的菜单，如下：

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

当进行压缩后，我们展开JeffckyWang.js脚本会有我们压缩的JeffckyWang.min.js脚本，如下：

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

复制文件到输出目录

在.NET Core之前我们创建一个文件可以通过设置该文件的属性来复制到bin目录下的debug或者release目录。例如我们创建一个install.bat文件，在.NET Core之前版本，我们可以手动通过如下设置，如下：

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

此时我们设置为始终复制则将其复制到debug或者release目录下。但是在.NET Core中其属性却是如下这样的

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

在项目中遇到这个问题瞬间懵逼了，想了想，既然在.NET Core一切基于配置，那么是否在project.json是否可以进行一下配置即可呢，功夫不负有心人，进行如下设置即可。

  "buildOptions": {

    "emitEntryPoint": true,

    "preserveCompilationContext": true,

    "copyToOutput": [ "install.bat" ]

  },

我们只需要在buildOptions节点下添加一个copyToOutput节点，该节点为一个数组，添加我们对应的文件路径即可。此时重新生成一下则在debug或者release目录下看到我们的文件，如下：

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录

总结

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

ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录的更多相关文章

  1. ASP&period;NET Core MVC中Controller的Action如何直接使用Response&period;Body的Stream流输出数据

    在ASP.NET Core MVC中,我们有时候需要在Controller的Action中直接输出数据到Response.Body这个Stream流中,例如如果我们要输出一个很大的文件到客户端浏览器让 ...

  2. ASP&period;NET CORE MVC 实现减号分隔&lpar;Kebab case&rpar;样式的 URL

    ASP.NET CORE MVC 中,默认的 Route 模板是: /{controller}/{action}  .我们可以通过开启 URL 小写转换将 URL 变为小写,但此方式在 Control ...

  3. ASP&period;NET Core 中文文档 第四章 MVC（01）ASP&period;NET Core MVC 概览

    原文:Overview of ASP.NET Core MVC 作者:Steve Smith 翻译:张海龙(jiechen) 校对:高嵩 ASP.NET Core MVC 是使用模型-视图-控制器(M ...

  4. 基于 Asp&period;Net Core MVC 的 Angular4 SSR 英雄指南

    为啥有这篇文章 在之前,类似 Angular.React.Vue 之类的前端框架的一个痛点就是无法在服务端提前把网页内容写入到网页中再发回浏览器,这给网站的 SEO 增加了不少困难,因为爬虫爬到的页面 ...

  5. 你所不知道的ASP&period;NET Core MVC&sol;WebApi基础系列（一）

    前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时间也是一直在看ASP.NET Core的内容,所以后续会穿插讲EF Core和ASP.NET Core,别认为你会 ...

  6. 你所不知道的ASP&period;NET Core MVC&sol;WebApi基础系列 &lpar;一&rpar;

    转自博客:https://www.cnblogs.com/CreateMyself/p/9235968.html 前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时 ...

  7. Pro ASP&period;NET Core MVC 6th 第三章

    第三章 MVC 模式,项目和约定 在深入了解ASP.NET Core MVC的细节之前,我想确保您熟悉MVC设计模式背后的思路以及将其转换为ASP.NET Core MVC项目的方式. 您可能已经了解 ...

  8. Pro ASP&period;NET Core MVC 第6版 第一章

    目录 第一章 ASP.NET Core MVC 的前世今生 ASP.NET Core MVC 是一个微软公司开发的Web应用程序开发框架,它结合了MVC架构的高效性和简洁性,敏捷开发的思想和技术和.N ...

  9. ASP&period;NET Core MVC 之布局（Layout）

    1.什么是布局 布局通常包含常见的用户界面元素,例如应用头,导航或菜单元素和页脚,如图: 常见的HTML结构(例如脚本和样式表)也经常被应用程序中许多页面使用.所有这些共享元素都可以在布局中定义,然后 ...

随机推荐

  1. 【WCF】自定义地址头的筛选器

    前面的文章中,老周已向大伙伴们介绍了如何在终结点上使用地址头,只要服务是沿着该终结点调用的,那么每一次调用都会自动把地址头插入到SOAP消息的Header列表中. 而通过前一篇文章中的示例,大家也看到 ...

  2. ubuntu更新源（Package has no installation candidate 的问题）

    最近将公司的台式机安装了ubuntu16.04,安装之后,使用apt-get install openssh-server 发现出现:Package 'openssh-server' has no i ...

  3. Java中数据类型转换问题

    boolean类型不可以转换为替他的数据类型. Java中byte(8位).short(16位).char三种类型的优先级是相同的,相同优先级之间是不能进行自动转换的(如果相互转换的话,必须强制类型转 ...

  4. iOS证书申请详细流程

    一．事前准备 1.1 准备苹果帐号 首先您需要有一个苹果的开发者帐号,一个mac系统.如果没有帐号可以打开申请加入苹果的开发者计划.如何申请网上有详细的介绍,在此不多做介绍. 如果您已经有了一个帐号, ...

  5. MIME类型大全

    获取MIME:HttpContext.Current.Request.Files[fileKey].ContentLength MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该 ...

  6. Delphi新语法和ifthen的扩展联想

    Delphi之前已经重载了好多个ifthen函数 Math单元 ): Integer; overload; inline; ): Int64; overload; inline; ): UInt64; ...

  7. C&plus;&plus; 头文件系列&lpar;ios&rpar;

    1 简介 我们都知道,平时常用的那些标准流,诸如iostream.ofstream.ifstream等等,其实都是对应的basic_XXX模版的实例类. 而这些basic_XXX类模版又都是继承自同一 ...

  8. DotNetCore跨平台~Quartz热部署的福音～监控文件夹的变化

    在DotNetCore出来之后,同时也使用了quartz进行调度中心的设计,将它做到docker里方便部署,在之前的quartz版本里支持配置文件的方式,而现在不支持了,我们应该去想一下,为什么不去支 ...

  9. Ubuntu 14&period;02 cmake升级 失败解决

    错误的提示: CMake Error: Could not find CMAKE_ROOT !!! CMake has most likely not been installed correctly ...

  10. NN中的激活函数【转载】

    转自:https://blog.csdn.net/edogawachia/article/details/80043673 1.sigmoid 特点:可以解释,比如将0-1之间的取值解释成一个神经元的 ...

相关文章