带有缩小 JS 和 CSS 的公共条件 Razor 视图答案

【问题标题】：Public Conditional Razor Views with minified JS and CSS带有缩小 JS 和 CSS 的公共条件 Razor 视图
【发布时间】：2015-04-08 14:58:16
【问题描述】：

我正在使用 ASP.NET MVC 5 开发我的网站。我正在使用 Grunt 来缩小我的 CSS 和 JS。一切正常，但如果我正在发布（发布模式）或正在调试（我需要清楚地阅读我的 CSS 和 JS），我需要更改文件的路由源。

类似这样的：

[调试模式]

<script src="scripts/myscript.js"></script>

[发布模式或公开模式]

<script src="dist/myscript.min.js"></script>

我在 StackOverflow(Razor view engine, how to enter preprocessor(#if debug)) 上阅读了这篇文章，我不喜欢建议的解决方案 因为我认为（不确定）加载的 Razon View 将始终在生产中检查服务器是否处于发布或调试模式，我认为没有必要。

有人可以确认我是否正确吗？我需要手动进行更改吗？还有其他解决方案吗？

谢谢！！问候！！

【问题讨论】：

考虑编写一个静态帮助函数，返回脚本 URL 路径，该路径从 web.config 文件中读取（并通过构建配置进行适当转换）
但是我处理了很多文件......在调试模式下大约有 20 个 JS 和 10 多个 css......
您可能只需要帮助程序返回一个字符串部分 URL，因此调试中的 'scripts/' 和发布中的 'dist/'。可能对您的具体情况没有帮助，但我已经看到类似的事情有效。
最好阅读documentation。使用捆绑包时，非缩小版本将在调试模式下使用。在发布模式下，如果没有对应的 -min- 文件存在，文件将被缩小。如果 -min- 文件确实存在，则会使用它。
concat 文件是什么意思？一个包可以包含多个文件，例如bundles.Add(new ScriptBundle("~/bundles/myScripts").Include("~/Scripts/myFirstScript.js", "~/Scripts/mySecondScript.js")); 在您使用的视图中@Scripts.Render("~/bundles/myScripts") 在调试模式下，这两个文件将被渲染。在发布模式下，它们会被框架缩小，但如果Scripts 文件夹中还包含myFirstScript-min.js 和mySecondScript-min.js，则将使用这些缩小后的文件。

标签： asp.net-mvc razor asp.net-mvc-5 razorengine

【解决方案1】：

实现此目的的一种方法是在 http 上下文中检查调试模式。

@if (HttpContext.Current.IsDebuggingEnabled)
{
    <script src="scripts/myscript.js"></script>
}
else
{
    <script src="dist/myscript.min.js"></script>
}

【讨论】：

@diegosasw 你应该使用 environment 标签助手来处理 asp.net 核心项目

【解决方案2】：

更新答案

感谢Shoe 我了解了环境标签助手的存在，因此我们现在可以像这样使用它，而不是我手动实现相同的旧答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <environment include="Development">
        <link rel="stylesheet" href="~/css/sasw.css" asp-append-version="true" />
    </environment>
    <environment exclude="Development">
        <!-- Google Analytics here for example -->
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>

老答案 还应与 Razor 视图（dotnet core 3.1+）一起使用的 Razor 页面的解决方案可能是注入 IWebHostEnvironment 并根据当前环境有条件地呈现（由全局变量 ASPNETCORE_ENVIRONMENT 定义）在你的_Layout.cshtml

@using Microsoft.Extensions.Hosting
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment Env
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    @if (Env.IsDevelopment())
    {
        <link rel="stylesheet" href="~/css/sasw.css" asp-append-version="true" />
    }
    else
    {
        <!-- Google Analytics here for example -->
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    }
</head>

此解决方案与bundleconfig.json 中定义的bundle and minification 策略完美配合

在我的情况下，bundleconfig.json 看起来像这样：

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/sasw.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/sasw.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

我添加了一个名为 BuildBundlerMinifier 的 nuget，它会自动缩小和捆绑 js 和 css，将缩小后的版本与原始版本放在同一文件夹中。

PS：如果您遵循相同的方法，请记住忽略（例如：.gitignore）*.min.js 和 *.min.css，让构建过程每次生成一个新的，而不将其提交到源代码控制。

【讨论】：