Maison > Article > développement back-end > Exemple détaillé du style de compression Core MVC (ASP)
Exemple détaillé du style de compression Core MVC (ASP)
- Y2Joriginal
- 2017-05-05 13:56:151515parcourir
Cet article présente principalement les informations pertinentes sur le style de compression ASP.NET Core MVC et les détails du script. Les amis qui en ont besoin peuvent se référer à l'
Avant-propos
. NET Core, nous devrons peut-être utiliser des outils tiers pour compresser les fichiers de style et les scripts, mais dans ASP.NET MVC Core, il n'est pas nécessaire d'utiliser des outils tiers pour terminer la compression. regardez ASP.NET Core MVC pour nous. Quelles commodités sont fournies.
Compresser automatiquement les styles et les scripts
Lorsque nous sommes dans l'environnement de test, nous n'avons certainement pas besoin de compresser le script. Une fois le script compressé, il le fera. cela ne sera pas utile si une erreur se produit dans la console. Nous déboguons, mais dans l'environnement de production, nous pouvons réduire le trafic de transmission en compressant les scripts ou les styles, et d'autre part, nous pouvons accélérer le temps de chargement des pages. En d'autres termes, à l'heure actuelle, nous avons besoin de l'environnement de test et de l'environnement de production correspondants. Version native et version compressée, alors comment le faire dans ASP.NET Core MVC ? Veuillez lire ci-dessous.
Nous plaçons les scripts, les styles, les images et autres fichiers statiques dans le répertoire du site Web wwwroot. À ce stade, nous devons d'abord ajouter bower.json<.> fichier pour télécharger le script et la version dont nous avons besoin, comme suit :
{
"name": "asp.net",
"private": true,
"dependencies": {
"jquery": "2.2.3",
"bootstrap": "3.3.6"
}
}Lors de l'ajout du script et du style dont nous avons besoin à un nœud dans ce fichier json, le script téléchargé sera et les styles seront automatiquement ajoutés dans le dossier du répertoire du site Web comme suit
<environment names="Development"> ..开发环境-加载脚本和样式 </environment> <environment names="Staging,Production"> ..准备和发布环境-加载脚本和样式 </environment>Voyons comment cela fonctionne dans la pratique. Chargez le script JQuery et le style Bootstrap comme suit : .
<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>Voyons si le résultat du chargement de la page est comme prévu.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
filesous launchSettings.json, comme suit :
"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"
}
}
}À ce moment, nous voyons lors de l'exécution l'application Accédez à l'environnement d'exécution que nous avons configuré ci-dessous.
<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>
rechercher le package Web Essentials dans le package et l'installer. Le package Web Essentials peut être vu dans les extensions et les mises à jour comme suit :
(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目录下看到我们的文件，如下：
【相关推荐】
1. ASP免费视频教程
2. ASP教程
3. 李炎恢ASP基础视频教程
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!