An example of a core MVC compression style (ASP)

This article mainly introduces the ASP. NET Core MVC compression style, script detailed information, the need for friends can refer to the following

Objective

Before. NET core for compressed style files and scripts we may need to use third-party tools to compress, but in ASP. We don't need third-party tools to do this, so let's take a look at the convenience that ASP-core MVC provides us with.

Auto-compress styles and scripts

When we do not need to compress the script in the test environment, if the script is compressed, if the error in the console is not conducive to our debugging, but in the production environment by compressing the script or style one can reduce transmission traffic, and can speed up the page load time, in other words, At this point we need to test the native and compressed versions of the environment and production environment, what should we do in ASP. Please look down.

We put some static files, such as scripts, styles, pictures, and so on, in the Wwwroot Web site Directory, we first need to add the Bower.json file to download the script and version we need, as follows:

{  "name": "ASP", "  private": True,  "dependencies": {  "jquery": "2.2.3",  "bootstrap": "3.3.6" }}

When a node in this JSON file adds the scripts and styles we need, the downloaded scripts and styles are automatically added to the Site Directory folder below

Of course we can also automatically restore to the Site Directory folder by right-clicking the Manage Bower package to download. Now that we have all the scripts and styles we want, we need to introduce scripts and styles into the view. In ASP. Three environments for loading styles and scripts are provided for us: development, Staging, Production. Development is the development environment, staging is the release of the beta version, 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" >. Development environment-load scripts and styles </environment><environment names= "Staging,production" >: Prepare and publish your environment-load scripts and styles </environment>

Let's take a look at what we actually do, load the jquery script and the bootstrap style as follows:

We look at the page loading results, as we expected.


A little awkward, full load in, how a situation, the results found also need to add taghelper at the top of the page, as follows:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

There's nothing wrong with that, but before we do that, we haven't explained the value of the names setting on the Environment node, how is ASP. NET MVC core detected? We need to specify the environment in the Profiles node in 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"}}  }
At this point we see the following operating environment we set up when we run application.


At this point, another classmate asked, we can manually write code before. NET core to implement the load script and style version, can be achieved in the ASP.

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

Isn't it wonderful that since we've got. NET core, we just need to add the asp-append-version= "true" property, and. NET core automatically helps us to add version control, and suddenly it's refreshing. Talking about here, is the automatic compression script and the style of the more than half, but I do not know what you see here, we are adding the package, are automatically with the compressed version, then if we write our own script and style, how to compress the script and style, please continue to look down.

Before we manually write our own scripts and styles, we need to search the package for the Web Essentials package and install it, I have installed it, and I can see the Web Essentials package in the extensions and updates as follows:


We create a JS folder under the Site Directory folder and add Jeffckywang.js script, in which we give the following script:

(function ($) {  "use strict";   Alert ("Learning to automatically compress scripts and styles");}) (JQuery);
As the above we have added the Web Essentials package at this time we right-jeffckywang.js the script, you will find that there is an automatic compression menu, as follows:


When compression occurs, we expand the jeffckywang.js script to have our compressed JeffckyWang.min.js script, as follows:


Copy files to output directory

Before. NET core we create a file that can be copied to the debug or release directory in the bin directory by setting the properties of the file. For example, we create a Install.bat file before the. NET core version, and we can manually pass the following settings as follows:


At this point we are set to always copy and copy it to the debug or release directory. But the properties in. NET core are as follows


Encounter this problem in the project in a moment, think about, since in the. NET core configuration-based, then whether the Project.json can be configured to do a bit, the effort is not a conscientious, the following settings can be.

"Buildoptions": {  "Emitentrypoint": True,  "Preservecompilationcontext": True,  "Copytooutput": [" Install.bat "]},
We only need to add a copytooutput node under the Buildoptions node, which is an array and adds our corresponding file path. At this point, you will see our files in the debug or release directory as follows:


"Recommended"

1. asp free Video Tutorial

2. asp Tutorials

3. Eon the ASP Basic video tutorial