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程序包,如下:

更新

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

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

我们在网站目录文件夹下创建一个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中对脚本和样式如何进行自动压缩以及对文件如何进行自动复制到输出目录,算是项目当中的一点小小总结吧,希望对阅读本文的你有所帮助。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

京东订单自动评价方法

刚刚完成的一个京东自动订单脚本, 以后还要加入其它京东自动的脚本项目地址: https://github.com/mm333444/aox_jd_auto_script 京东自动完成脚本 目前只完成京东订单自动评价, 评价时会自动上传商品图片 一、安装 1. 程序依赖 python3.52. 安装配置 安装pipenv安装模块 pipenv…

宜建立自主可控的车用芯片和操作系统技术体系

万物互联时代&#xff0c;操作系统的边界在不断突破&#xff0c;面向“人机物”融合的泛在计算场景&#xff0c;能够支撑分布式人机物协同应用的操作系统将是产业未来之光。操作系统在经过主机时代、PC互联时代、移动互联时代之后&#xff0c;来到万物互联时代&#xff0c;这恰…

django 用户管理(1)

编辑了前端的页面展示&#xff0c;用的bootstrap 用户登录 用户信息 用户编辑 创建用户 修改密码 转载于:https://blog.51cto.com/jacksoner/2133129

qiaoye.php,全自动无限生成关键词页面(黑帽SEO优化终极方法)

如果你是做黑帽SEO的&#xff0c;如果你还停留在用栏目、租域名、劫持等手段来做黑帽SEO优化&#xff0c;我可以肯定的告诉你&#xff0c;你做的再好&#xff0c;也赚不了多少。那么今天咱们要说的就是无限生成关键词页面用内容页来做黑帽SEO优化。这是我在演示的时候做的一个站…

v1.0.25 新版发布及Smart Meetup重新开启丨SmartIDE

作者&#xff1a;徐磊文章首发地址&#xff1a;https://smartide.cn/zh/blog/2022-0892-sprint25/关于SmartIDESmartIDE是一群开发者为所有开发者开发的开源云原生IDE&#xff0c;我们的使命是“为开发者赋予云原生的超能力”&#xff01;使用SmartIDE你只需要学会一个简单的指…

vue实现首屏加载等待动画 避免首次加载白屏尴尬

为什么80%的码农都做不了架构师&#xff1f;>>> 0 直接上效果图 1背景&#xff0c;用户体验良好一直是个重要的问题。 2怎么加到自己项目里面&#xff1f; 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066&#xff0c;美女多多。…

java-回调机制详解

转&#xff1a;http://blog.csdn.net/llayjun/article/details/50454148 阅读目录 一、前言二、回调的含义和用途三、Java实现接口回调 四、Android中的接口回调五、参考资料一、前言 最近在看android fragment与Activity进行数据传递的部分&#xff0c;看到了接口回调的内容&a…

lfi读取php,php LFI读php文件源码以及直接post webshell

php LFI读php文件源码以及间接post 网站shell假如如下一个场景(&#xff11;) http://vulnerable/fileincl/example&#xff11;.php?pageintro.php(该php文件包孕LFI漏洞)(&#xff12;) 然而你不有中央能够upload你的网站shell代码(三) LFI只能读取到非php文件的源码(由于无…

根据请求上下文动态设置静态文件存储目录

前言上次&#xff0c;我们实现了根据 subpath 特定格式《动态设置静态文件存储目录》。例如&#xff1a;subpath静态文件路径/userAId/1.jpgc:\abc\userAId\1.jpg/userBId/1.jpgd:\xyz\123\userBId\1.jpg但是&#xff0c;如果 subpath 不能有这种特定格式&#xff0c;只能用通用…

ImageView的scaleType理解

2019独角兽企业重金招聘Python工程师标准>>> 1.android:scaleType“center” 保持原图的大小&#xff0c;显示在ImageView的中心。当原图的size大于ImageView的size时&#xff0c;多出来的部分被截掉。 2.android:scaleType“center_inside” 以原图正常显示为目的&…

第一章 引论

1、什么是多道程序设计&#xff1f; 即内存中同时运行多道独立程序&#xff0c;宏观上所有程序同时运行&#xff0c;微观上程序串行&#xff0c;多道程序轮流占用CPU&#xff0c;提高了资源利用率。 2、什么是SPOOLING&#xff1f;读者是否认为将来的高级个人计算机会把SPOOLIN…

《ASP.NET Core 6框架揭秘》实例演示[24]:中间件的多种定义方式

ASP.NET Core的请求处理管道由一个服务器和一组中间件组成&#xff0c;位于 “龙头” 的服务器负责请求的监听、接收、分发和最终的响应&#xff0c;针对请求的处理由后续的中间件来完成。中间件最终体现为一个Func<RequestDelegate, RequestDelegate>委托&#xff0c;但…

Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

为什么80%的码农都做不了架构师&#xff1f;>>> 随着 Google 推出了全新的设计语言 Material Design&#xff0c;还迎来了新的 Android 支持库 v7&#xff0c;其中就包含了 Material Design 设计语言中关于 Card 卡片概念的实现 —— CardView。RecyclerView也是谷…

Java——Arrays类操作数组的工具类

JDK中提供了一个专门用于操作数组的工具类&#xff0c;即 Arrays 类&#xff0c;位于 Java。util 包中。该类提供了一系列方法来操作数组&#xff0c;如排序、复制、比较、填充等&#xff0c;用户直接调用这些方法即可&#xff0c;不需要自己编码实现&#xff0c;降低了开发难度…

CORS——跨域请求那些事儿

【本期嘉宾介绍】睿得&#xff0c;具有多年研发、运维、安全等IT相关从业经历。目前从事CDN、存储、视频直播点播的技术支持。喜爱钻研&#xff0c;喜爱编码&#xff0c;喜爱分享。 在日常的项目开发时会不可避免的需要进行跨域操作&#xff0c;而在实际进行跨域请求时&#xf…

oracle 数据执行计划,Oracle里常见的执行计划

本文介绍了Oracle数据库里常见的执行计划&#xff0c;使用的Oracle数据库版本为11.2.0.1。1、与表访问相关的执行计划Oracle数据库里与表访问有关的两种方法&#xff1a;全表扫描和ROWID扫描。反映在执行计划上&#xff0c;与全表扫描对应的执行计划中的关键字是“TABLE ACCESS…

.NET MAUI实战 Dispatcher

详细内容这一期分享的内容非常简单&#xff0c;在之前使用过WPF的开发者对MVVM开发模式下ViewModel中后台线程转UI线程并不陌生使用Appplication.Current.Dispatcher。那么在.NET MAUI中也有同样的机制&#xff0c;存在于.NET MAUI Shell对象中。那么什么是Shell&#xff1f;官…

GDB 配置

GDB 配置 使用 GDB 扩展来配置 GDB 事实上我还是觉得原生的 GDB 就挺好&#xff0c;速度快&#xff0c;需要查看什么执行命令就可以。 GDB DashBoard https://github.com/cyrus-and/gdb-dashboard $sudo mkdir -m 777 ~/gdbinit; cd ~/gdbinit $git clone https://github.com/c…

Oracle区分中文和英文,oracle中中英文段落划分实现

oracle中关于中文占用字节数&#xff0c;不同的数据库有不同的情况&#xff0c;有的占用两个字节、有的占用三个字节&#xff0c;现在测试环境的数据库中文占用三个字节&#xff0c;要实现由中英文组成的段落字符串&#xff0c;按照每行占用多少字节重新分段&#xff0c;具体应…

虚拟机网络配置详解(NAT、桥接、Hostonly)

VirtualBox中有四种网络连接方式: NATBridged AdapterInternalHost-only AdapterVMWare中有三种&#xff0c;其实它跟VMWare的网络连接方式都是一样的概念&#xff0c;只是比VMWare多了Internal方式 在介绍四种工作模式之前&#xff0c;先说下虚拟网卡&#xff0c;虚拟机安装好…