ASP.NET核心MVC压缩风格及脚本详解

序

之前。NET Core中，我们可能需要使用第三方工具来压缩压缩后的样式文件和脚本，但是在ASP.NET MVC Core中，我们不需要使用第三方工具来完成压缩。在这一节中，我们将看看ASP.NET核心MVC提供的便利。

自动压缩样式和脚本

当我们在测试环境中肯定不需要压缩脚本的时候，如果我们压缩脚本一次，如果控制台出现错误，不利于我们的调试，但是在生产环境中，我们可以通过压缩脚本或者样式来减少传输流量，其次可以加快页面加载时间。换句话说，此时我们需要测试环境和生产环境对应的原生版本和压缩版本，那么在ASP.NET Core MVC中应该怎么做呢？请往下看。

我们在wwwroot网站目录中放了一些静态文件，比如脚本、样式和图片。此时，我们首先需要添加bower.json文件来下载我们需要的脚本和版本，如下所示：

{'name' :' ASP。net '，' private' : true，' dependencies ' : { ' jquery ' : ' 2 . 2 . 3 '，' bootstrap' 3360' 3.3.6'}}是此json文件中的第一个节点

当然，我们也可以通过右键单击Manage Bower Package来下载，它也会自动恢复到网站目录文件夹中。此时，我们已经有了所有想要的脚本和样式，然后我们需要将脚本和样式引入视图。在ASP.NET核心MVC中，我们提供了三种加载样式和脚本的环境：开发、试运行和生产。开发是开发环境，试运行是预发布测试版本，生产是发布版本。那么我们如何在视图中使用它呢？我们通过环境节点上的名称指定上述三种环境，如下所示：

环境名称=“发展”.开发环境-加载脚本和样式/环境环境名称='暂存，生产'.准备和发布环境-加载脚本和样式/环境。实际操作是什么？加载JQuery脚本和引导样式，如下所示：

Htmlhead title学会加载脚本和样式/title/head dy/body/html environmentname=' development '脚本src=' http : ~/lib/jquery/dist/jquery . js '/脚本脚本src=' http : ~/lib/bootstrap/dist . js '/脚本链接href=' ~/lib/bootstrap/dist/js/

有点尴尬。都装上了。发生了什么事？事实证明，您需要在页面顶部添加TagHelper，如下所示：

@addTagHelper *，微软。9502.163.com

这没什么不好。在此之前，我们还没有解释过一点。ASP.NET MVC核心是如何在环境节点上检测到我们名字设置的值的？我们需要在launchSettings.json下的Profiles节点中指定环境，如下所示：

profiles ' : { ' IIS Express ' : { ' command name ' : ' IIS Express '，' launchBrowser': true，' launchul ' : ' Home/Index '，' ENVIRONMENT variables ' : { ' ASPNETCORE _ ENVIRONMENT ' : ' Development ' }，' IIS Express(Production)' : { ' command name ' : ' IIS Express '，launchul ' 3: '

这时，另一个同学问，我们之前可以手动写代码吗。NET Core来加载脚本和样式的版本。能否在ASP.NET Core MVC中实现？既然我们已经说过了，这当然是可能的，如下。

环境名称='Staging，Production '脚本src=' http : ~/lib/jquery/dist/jquery . min . js ' ASP-append-version=' true '/脚本脚本src=' http : ~/lib/tether/dist/js/tether . min . js ' ASP-append-version=' true '/脚本脚本src=' http : ~/lib/bootstrap/dist/js . min . js ' ASP-append-version=' true '/

是不是很奇妙？自从我们有了。NET Core，我们只需要添加asp-append-version='true '属性，并且。NET Core自动帮我们添加了版本控制，让我们感觉神清气爽。至此，我们已经完成了一半以上的自动压缩脚本和样式。不过，不知道大家看完这里有没有发现。我们被自动添加压缩版本的包。如果我们自己写脚本和样式，如何压缩脚本和样式？请继续往下看。

在手动编写我们自己的脚本和样式之前，我们需要在包中搜索Web Essentials包并安装它。我已经安装了它，可以在扩展和更新中看到Web Essentials包，如下所示：

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

(函数($) { '使用strict '；Alert('学习自动压缩脚本和样式')；})(jQuery)；由于以上原因，我们添加了Web Essentials包。此时，我们右键单击JeffckyWang.js脚本，您会发现有一个自动压缩的菜单，如下所示：

压缩后，当我们扩展JeffckyWang.js脚本时，我们将得到压缩后的JeffckyWang.min.js脚本，如下所示：

将文件复制到输出目录

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

此时，如果我们将它设置为总是复制，我们会将其复制到调试或发布目录。然而，在。NET Core，其属性如下

在项目中遇到这个问题，我愣了一下。想了想，既然一切都在。NET Core是基于配置的，可以在project.json中配置吗？努力是有回报的，只需做以下设置。

BuildOptions' : { '发出入口点' : True，' PreserveCompilationContext ' : True，' copy toooutput ' 3360[' install。bat']}，我们只需要在Build Options节点下的输出节点添加一个副本，这是一个数组，并添加我们对应的文件路径。此时，如果您重新生成它，您可以在调试或发布目录中看到我们的文件，如下所示：

摘要

在本节中，我们将讨论如何在中自动压缩脚本和样式。NET Core以及如何自动将文件复制到输出目录，这是对项目的一点总结。希望对阅读这篇文章的你有所帮助。