标签: bundling-and-minification

我System.Web.Optimization在我认为是标准配置的情况下使用 v1.3，以捆绑和缩小 MVC 5 Web 应用程序中的 JavaScript 和 CSS 文件。在大多数情况下，这工作得很好，但我发现了 JavaScript 被缩小过程损坏的情况。

这是最初的 AngularJS 输入验证指令的简化版本：

var myApp;
(function (myApp) {
    myApp.module.directive("validator", [
        function () {
            return {
                link: function (scope, element) {
                    var validators = [
                        { signal: "required", message: "Please enter a value", value: null },
                        { signal: "email", message: "Please enter a valid email address", value: null }
                    ];
                    $("input", element).on("blur", function () {
                        for (var i in validators) {
                            var validator = validators[i];
                            if (scope.$parent.form[scope.modelName].$error[validator.signal]) …

我在 MVC 4 中使用默认的捆绑和缩小。

我们的一个样式表以这样的 CSS 开头：

@media (max-width: 979px) {
    @keyframes sidebarSlideInRight {
        from { right: -220px }

        to { right: 0 }
    }

    @-webkit-keyframes sidebarSlideInRight {
        from { right: -220px }

        to { right: 0 }
    }
}

缩小失败并出现以下错误：运行时错误 CSS1019: Unexpected token, found '}'并且它指向第 13 行的第一个字符（这是上面代码片段中的最后一个 }）。

我一般不太熟悉 CSS，我想知道：

1. 那是有效的 CSS 吗？它在https://jigsaw.w3.org/css-validator/validator验证失败
2. 需要进行哪些更改才能缩小文件？文件中有大约 300 行，所以如果可能的话，我真的很想把它缩小。

部署应用程序之前的常规约定是缩小所有资产（css、html、js）。这通常假设所有资产都在一个独立的文件中（即所有 js 代码都在/js/mycode.js.

但是，我编写了一堆带有<script>标签的 jinja2 模板，它们使用了模板的变量。这对于快速快速编写 UI 很有用，但我想知道将所有这些迁移到一个 js 文件中以便以后可以进行缩小的最佳方法是什么？

例如，我有很多包含内联 js 的模板：

<div class="some_content">
    <button>{{mytext}}</button>
</div>
<script>
    $(".some_content button").click(function() {
        $(this).text("{{new_text}}");
        $.post("{{url_for('doit', name=name)}}", function() {
            console.log('Done!');
        });
    });
</script>

我知道我可以将 js 代码填充到一个文件中，然后执行{% include 'mycode.js' %}，但随后我会将所有 js 代码导入到模板中。一些模板具有继承性，因此执行 include 语句会导致文件多次将整个脚本加载到页面中（不好）。而且我不确定包含这样的脚本如何与缩小一起工作。

有没有一种好方法可以将所有内联 JS 代码移动到外部文件，而不会失去 jinja2 模板变量的好处，以便我可以缩小我的 javascript？或者更确切地说，缩小所有内联 JS 的好方法是什么？

问题是，当我右键单击“缩小文件”时，Visual Studio 没有缩小，而是给出了此错误：“访问路径 bundleconfig.json 被拒绝”。

我确信我错过了一些简单的事情。

从 Microsoft 提供的默认 ASP.Net Web 表单模板开始，我添加了几个 CSS 文件，将其捆绑并将其添加到 Site.Master。东西在本地可以工作，但在 Azure 上发布时就不行了。

基于这些链接 -链接 1和链接 2，我尝试更改捆绑包名称，但它仍然不起作用，并且我在 Azure 上收到 404 错误。

当前文件结构：

Bundle.config 文件

Site.master 文件内容

<webopt:bundlereference runat="server" path="~/Content/css" />
<webopt:bundlereference runat="server" path="~/Content/mycss" />

第一个参考有效，但第二个参考无效。还有其他想法可能是什么问题吗？

如果 JavaScript 包含模板文字，则使用最新版本的Microsoft.AspNet.Web.Optimization v1.1.3我无法捆绑以缩小 JavaScript 。例如，如果我在我的捆绑脚本之一中包含以下内容：

var name = 'Bob';
var formattedName = `${name} says hello`;

生成的包将加入所有文件，但不会缩小代码，并给我这个错误：

/* Minification failed. Returning unminified contents.
(2,13-14): run-time error JS1014: Invalid character: `
(2,15-16): run-time error JS1004: Expected ';': {
(2,30-31): run-time error JS1014: Invalid character: `
(3,1-2): run-time error JS1107: Expecting more source characters
*/

我知道此功能仅在 ECMAScript2015 中引入，显然不受支持，但除了恢复到旧的字符串连接方法之外，是否还有其他干净的解决方法？

var name = 'Bob';
var formattedName = name + ' says hello';

此外，模板文字支持是否会进入Microsoft.AspNet.Web.Optimization?

是否存在通过引用插入实现 YAML 缩小的现有工具、库或算法？如果这个问题已经有一个通用的解决方案，我不想重新发明轮子。

我在此上下文中创建了术语引用插入，因此我想要的行为可能有不同的名称。让我解释一下引用插入的含义：

• 没有引用插入, 的基本 YAML 缩小算法MinifyYamlBasic与 JSON 缩小同构，但会用最不冗长的等效 YAML 节点语法替换任何 JSON 原语。我MinifyYamlBasic在https://onlineyamltools.com/minify-yaml找到了一个在线实施示例。

• 甲YAML缩小算法参照插入，MinifyYamlWithReferences将尽一切MinifyYamlBasic确实，但随后会产生对发生多次，并用所产生的锚的引用替换重复YAML节点，以降序YAML节点文本长度的顺序任何YAML节点锚。

这是我正在寻求的行为的基本思想，尽管显然还有其他因素需要考虑。小于别名的重复节点可能不应该被引用替换。输入文档需要规范化，以便可以通过句法比较识别语义等效的节点，这至少包括： 标量的规范形式替换；映射节点键的规范排序；取消引用和删除预先存在的锚点。

可能还有更多我还没有考虑过。在我花时间进一步考虑之前，

1. 是否有任何可用资源提供MinifyYamlWithReferences（或类似的东西）的现有实现？

2. 算法（或算法类别）是否有一个常用的名称，我称之为“带引用插入的缩小”？

我发现很多文章都向我指出 BundleConfig.cs 不再是 MVC 的东西。相反，我想使用第三方工具来实现这一点。至少，这是我的理解。我花了很多时间研究并试图理解，但找不到任何关于如何使用bundlingconfig.json. 微软的一些文章，比如这篇https://docs.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-2.1&tabs=visual-studio% 2Caspnetcore2x讨论了默认模板如何使用它，但它没有告诉我他们究竟是如何实现它的。此外，当我尝试使用核心 2.1 项目创建新模板时，它不存在。所以我很困惑如何让我的 bundleconfig.json 工作。

现在，我喜欢从头开始并构建事物，因此我可以很好地了解它们的工作原理，以便在将来出现问题时可以修复它们。因此，我创建了一个没有任何内容的全新项目，并添加了我的控制器、视图以及获得基本网站所需的一切。然而，仅仅通过自己添加配置文件，它什么都不做。我希望它是 mvc 框架的一部分，它会选择它并知道如何处理它。但我想情况并非如此，除了配置文件之外，我找不到任何关于我需要添加什么才能使其工作的说明。

有人能指出我正确的方向吗？

[
  {
    "outputFileName": "wwwroot/css/Test.css",
    "inputFiles": [
      "wwwroot/css/Global.css"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

然后在我的 cshtml 页面中我添加了

<link rel="stylesheet" href="~/css/Test.css" />

我正在尝试实现弹出窗口，但似乎 poppers.js 不想在 bootstrap.js 之前加载。我试图将包放在引导程序之前，但它不想加载。捆绑配置：

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/popper").Include(
              "~/Scripts/popper.js"
              ));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js"
              ));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/xbbcode.css",
              "~/Content/site.css"));


}

_布局：

@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

我仍然收到此错误：

jQuery.Deferred 异常：Bootstrap 的工具提示需要 Popper.js ( …

我们知道System.Web.optimization不支持 ES6 javascript 文件的打包和压缩，那么如何支持呢？