Detailed example of Core MVC compression style (ASP)-C#.Net Tutorial-php.cn

This article mainly introduces the relevant information of ASP.NET Core MVC compression style and script details. Friends in need can refer to the following

Preface

. NET Core, we may need to use third-party tools to compress style files and scripts, but in ASP.NET MVC Core, there is no need to use third-party tools to complete the compression. In this section, we will take a look at what ASP.NET Core MVC does for us. What conveniences are provided.

Automatic compression of styles and scripts

When we do not need to compress scripts in the test environment, if once the script is compressed, it will not be helpful if an error occurs in the console We debug, but in the production environment we can reduce the transmission traffic by compressing scripts or styles, and secondly speed up the page loading time. In other words, at this time we need the corresponding test environment and production environment. Native version and compressed version, so how to do it in ASP.NET Core MVC? Please read below.

We place some static files such as scripts, styles, pictures etc. in the wwwroot website directory. At this time we first need to add bower.jsonFile to download the scripts and versions we need, as follows:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
  "jquery": "2.2.3",
  "bootstrap": "3.3.6"
 }
}

Copy after login

When adding the scripts and styles we need to a node in this json file, the downloaded scripts and styles will be It is automatically added to the website directory folder as follows

Of course we can also download it by right-clicking ->Manage Bower package and it will also be automatically restored to the website directory folder. At this point we have all the scripts and styles we want. Next, we need to introduce scripts and styles into View. ASP.NET Core MVC provides us with three environments for loading styles and scripts: Development, Staging, and Production. Development is the development environment, Staging is the test version before release, and Production is the release version. So how do we use it in the view? We specify the above three environments through the names on the environment node, as follows:

<environment names="Development">
 ..开发环境-加载脚本和样式
</environment>

<environment names="Staging,Production">
 ..准备和发布环境-加载脚本和样式
</environment>

Copy after login

Let’s see how it works in practice. Load the JQuery script and Bootstrap style as follows:

<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>

Copy after login

Let’s see if the page loading result is as we expected.

It’s a little embarrassing, it’s all loaded in, what’s the situation, it turns out that you need to add TagHelper at the top of the page, as follows:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Copy after login

There's nothing wrong with this. We haven't explained one point before. How does ASP.NET MVC Core detect the value we set for names on the environment node? We need to specify the environment in the Profiles node under launchSettings.json, as follows:

"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"
   }
  }
 }

Copy after login

At this time we see the following when running the application The operating environment we set up.

At this time, another classmate asked, we can manually write code before .NET Core to implement the version of loading scripts and styles. In ASP.NET Core MVC, we can Can it be implemented? Now that we have mentioned it, of course it is possible, as follows.

<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>

Copy after login

Isn’t it wonderful? Since we have .NET Core, we only need to add asp-append-version="true"attribute,. NET Core automatically added version control for us, and I felt refreshed. At this point, we have finished talking about more than half of the automatic compression scripts and styles. However, I don’t know if you have noticed after reading this. The packages we added automatically come with compressed versions. So if When we write our own scripts and styles, how do we compress the scripts and styles? Please continue to read below.

Before manually writing our own scripts and styles, we need to search Web Essentials package and install in the package. I have already installed it. The Web Essentials package can be seen in extensions and Updates, as follows:

We create a js folder under the website directory folder and add JeffckyWang .js script, in which we give the following script:

(function ($) {
  "use strict";
   alert("学习自动压缩脚本和样式");
})(jQuery);

Copy after login

由于上述我们已经添加了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" ]
 },

Copy after login

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

【相关推荐】

1. ASP免费视频教程

2. ASP教程

3. 李炎恢ASP基础视频教程

The above is the detailed content of Detailed example of Core MVC compression style (ASP). For more information, please follow other related articles on the PHP Chinese website!