.NET Core2.0 bundleconfig.json 不工作

Question

我正在努力尝试让捆绑在 Core 2.0 Web 应用程序中工作。我的 bundleconfig.json 文件中有以下内容：

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/css/bootstrap.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
    ]
  },
  {
    "outputFileName": "wwwroot/css/jquery-datatables.min.css",
    "inputFiles": [
      "wwwroot/lib/jquery/jquery-datatables/datatables.css",
      "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/bootstrap.min.js",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/jquery-datatables.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery/jquery-datatables/datatables.js",
      "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/js/dataTables.responsive.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

我安装了 BuildBundlerMinifier NugGet 包。当我构建项目时，我看到正在处理 bundleconfig.json 文件。
我将以下内容添加到 _Layout.cshtml:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />                        
    <environment include="Development,Staging,Production">
        <link rel="stylesheet" href="~/wwwroot/css/site.min.css" />
        <link rel="stylesheet" href="~/wwwroot/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/wwwroot/css/jquery-datatables.min.css" />            
    </environment>
</head>
<body>
    <environment include="Development,Staging,Production">
        <script src="~/wwwroot/js/site.min.js"></script>
        <script src="~/wwwroot/js/jquery.min.js"></script>
        <script src="~/wwwroot/js/bootstrap.min.js"></script>
        <script src="~/wwwroot/js/jquery-datatables.min.js"></script>            
    </environment>
    @RenderSection("Scripts", required: true)
</body>

当我运行应用程序时，资源未加载。我收到以下错误：

Loading failed for the <script> with source “https://localhost:44301/wwwroot/js/site.min.js”.
Loading failed for the <script> with source “https://localhost:44301/wwwroot/js/jquery.min.js”.
Loading failed for the <script> with source “https://localhost:44301/wwwroot/js/bootstrap.min.js”.
Loading failed for the <script> with source “https://localhost:44301/wwwroot/js/jquery-datatables.min.js”

有人可以帮我吗？

Answer 1

您必须删除网址中的 "wwwroot" 部分。 "wwwroot" 是您的应用程序所在的根文件夹运行。现在它将搜索 "...wwwroot/wwwroot/js..." 中的文件，而不是 "...wwwroot/js..." .

Answer 2

问题是您的路径中没有使用 wwwroot。问题是您在 wwwroot 之前使用了 ~ 符号，它告诉浏览器使用根路径 (wwwroot) 以及您的路径后面的内容，这也是 wwwroot。

可以使用绝对路径

"inputFiles": [
      "wwwroot/css/site.css"
    ]

或者相对路径

 "inputFiles": 
      "~/css/site.css"
    ]

两者不同时，因为相对路径用 ~ 或 ../ 符号补充完整路径。

对您的脚本的另一个观察。你到底为什么要把文件分开？捆绑的目的是您不必包含每个单独的文件。它将它们组合在一个缩小的文件中，并减少对服务器加载页面的请求。不要将数据表脚本与您的脚本分开。

而不是：

{
    "outputFileName": "wwwroot/css/bootstrap.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
    ]
  },
  {
    "outputFileName": "wwwroot/css/jquery-datatables.min.css",
    "inputFiles": [
      "wwwroot/lib/jquery/jquery-datatables/datatables.css",
      "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css"
    ]
  },

你应该输入：

{
    "outputFileName": "wwwroot/css/myStyles.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
      "wwwroot/lib/jquery/jquery-datatables/datatables.css",
      "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css"
    ]
  }

Answer 3

我无法正常工作，了解到目前还有更多问题。

默认情况下 none 的 Bundling & Minifying 东西安装在 dotnet core razor pages 项目中。

据推测，您可以通过在 Visual Studio 解决方案资源管理器中右键单击 bundleconfig.json 来检查您的设置。但这在我的项目中没有显示任何内容。

我终于找到了一个 Visual Studio 插件。

捆绑器和压缩器 -- 手动

相反，我安装了手动捆绑器和缩小器——它与上面的 Nuget pkg 由同一作者 (Mads Kristensen) 编写。 https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

这是一个 Visual Studio 扩展，安装后，您可以右键单击任何 css 或 js 文件，您将看到允许您缩小它们的菜单 "manually" .

在构建时启用捆绑...

该选项将警告您它将要安装 Nuget 包。我还没有那样做。

我还取消选中 [Produce Output Files] 选项，然后再次选择它（选中），当我这样做时，另一个文件在 bundleconfig.json[=62 下面的解决方案中创建=] 名为 bundleconfig.json.bindings。该文件仅包含一行：

produceoutput=true

奇怪的是它以前没有。我知道该文件以前不存在，因为 git 告诉我有未跟踪的文件并提到了该文件。

为了测试 studio 是否有问题，我创建了一个全新的 dotnet Core 2.x Razor Pages 项目，然后立即删除了 min.css 并尝试重新构建它但是它再也不会建造了。

更新所有包添加 .bindings 文件后我再次构建，但仍未构建捆绑包。然后我注意到 [Build] 菜单下有另一个选项，但我不确定那是否是我安装的 Bundling & Minifying 插件，因此您在寻找此解决方案时必须考虑到这一点。

您还可以在 Visual Studio [工具...选项...] 菜单中检查您的设置：

您可以看到 Bundler & Minifier 在我的项目中将 Product Output files 选项设置为 true （即使它仍然不起作用）。

实际上，我更仔细地阅读了底部的那句话，我注意到它说 "actively listens to input file changes" 所以我去更改了我的 site.css 并注意到该值确实在 site.css.

改变，再改变

奇怪的是当/如果您删除您的站点。min.css然后它似乎不会在任何时候重新生成。我想现在如果你这样做，你可以进行更改并将其更改回来，然后将创建最小文件。

我测试过：删除网站。min.css然后进行更改，文件再次生成。奇怪的是构建没有触发这个功能。

Answer 4

根据 Microsoft 的文档 here.

The BuildBundlerMinifier NuGet package enables the execution of bundling and minification at build time.

一开始这也让我很恼火，因为它不是默认安装的，而且捆绑器的含义似乎是它应该内置工作。但事实并非如此。

Answer 5

安装 VS 2017 Community 2017 后，版本 15.8.9

捆绑和缩小停止工作

无法在 NuGet 中安装

因此，在“工具”菜单、“扩展和更新”中，更新捆绑和缩小并重新启动 VS 后，它开始工作

现在，在 select bundleconfig.json 之后，右键单击，在弹出菜单中，显示项目 "Bundler & Minified"

Answer 6

我今天遇到了这个问题。对我来说关键是 nuget 包（BuildBundlerMinifier) wasn't enough for this to work. You need to also install the Bundler and Minifier VS extension. From there, you can follow the instructions here 在构建时启用捆绑。请注意，如果你还没有 nuget 包，VS 扩展也会安装它。

关于为什么这不能开箱即用，我认为这是因为这是 Mads 生产的相当新的第 3 方工具。

Answer 7

我厌倦了 Nuget 包管理器，但它不起作用，然后卸载它，

已解决：

打开 Nuget 包管理器控制台、

Install-Package BuildBundlerMinifier -Version 2.8.391

和再次重建解决方案。它对我有用。

Answer 8

我做的最终解决方案是已删除 - <PackageReference Include="BundlerMinifier.Core" Version="2.8.391" />
添加 - <PackageReference Include="BuildBundlerMinifier" Version="2.9.406" /> 使其正常工作。

添加 VS 扩展并在构建步骤中启用捆绑包还会添加 BuildBundlerMinifier 包。

Answer 9

安装了 BuildBundlerMinifier.Core 版本 (3.0.415)。那没有用，但是 BuildBundlerMinifier (3.0.415) 的非核心版本工作正常（在 asp.net 核心 2.2 项目中）。

Answer 10

除了上面raddevus给出的答案；在 Visual Studio 中打开任务资源管理器，展开 bundleconfig.json；右键单击更新所有文件和select绑定然后构建后 ... -哒！

Answer 11

安装 BuildBundlerMinifier 它将有助于创建最小文件

.NET Core2.0 bundleconfig.json 不工作

.NET Core2.0 bundleconfig.json not working

c#

bundle

asp.net-core