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>

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

带有“https://localhost:44301/wwwroot/js/site.min.js”的<script>加载失败带有“https://localhost:44301/wwwroot/js/jquery.min.js”的<script>加载失败带有“https://localhost:44301/wwwroot/js/bootstrap.min.js”的<script>加载失败带有“https://localhost:44301/wwwroot/js/jquery-datatables.min.js”
的<script>加载失败

有人可以帮帮我吗？

Answer 1

我无法理解这一点，并了解到目前问题还有更多。

默认情况下，Bundling＆amp;缩小内容安装在dotnet核心剃刀页面项目中。

据说，您可以通过右键单击Visual Studio Solution Explorer中的 bundleconfig.json 来检查您的设置。但这并没有在我的项目中显示任何内容。

我终于找到了 Visual Studio加载项。

Bundler＆amp; Minifier - 手动

相反，我安装了一个手动捆绑器＆amp; minifier - 由同一作者（Mads Kristensen）编写，作为上面的Nuget pkg。 https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

这是一个Visual Studio扩展程序，在您安装它之后，您可以右键单击任何css或js文件，然后您将获得允许您缩小它们的菜单＆＃34;手动＆＃34;。

在构建中启用捆绑...

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

我也取消选中了[生成输出文件]选项，然后再次选中（选中），当我这样做时，另一个文件是在 bundleconfig.json 下面的名为 bundleconfig的解决方案中创建的.json.bindings 即可。该文件只包含一行：

produceoutput=true

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

为了测试工作室中是否存在问题，我创建了一个全新的dotnet Core 2.x Razor Pages项目，然后立即删除了min.css并尝试重新构建它但它永远不会再建一次。

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

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

你可以看到Bundler＆amp; Minifier在我的项目中将Product Output files选项设置为true（即使它仍然无法正常工作）。

实际上，我更仔细地阅读了这个底部句子，我注意到它说，＆＃34;主动监听输入文件的变化＆＃34;所以我去改变了我的site.css并注意到该值确实在site.css中更新。

进行更改，将其更改

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

我测试了一下：删除了site.min.css然后进行了更改，文件再次生成了。这个版本没有激发这个功能，这很奇怪。

Answer 2

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

Answer 3

根据Microsoft here.

的文档

BuildBundlerMinifier NuGet软件包允许在构建时执行捆绑和最小化。

这也让我一开始也感到恼火，因为默认情况下未安装它，并且捆绑程序的含义似乎是它应该内置。但事实并非如此。

Answer 4

问题是您的路径中没有使用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 5

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

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

Answer 6

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

Answer 7

在安装VS 2017 Community 2017版本15.8.9之后

捆绑和缩小功能停止工作

在NuGet中安装无法正常工作

因此，在“工具”菜单的“扩展和更新”中，更新“捆绑和缩小”并重新启动VS后，它便可以正常工作

现在，选择bundleconfig.json后，在弹出菜单中右键单击，显示项目“ Bundler＆Minified”

Answer 8

我今天遇到这个问题。对我来说，关键是nuget包（BuildBundlerMinifier）不足以使其正常工作。您还需要安装Bundler and Minifier VS扩展。从那里，您可以按照instructions here启用构建捆绑。请注意，如果您尚未安装nuget软件包，则VS扩展也会安装它。

关于为什么不能立即使用，我相信是因为这是Mads制作的相当新的第三方工具。

Answer 9

我为Nuget Package Manager感到厌倦，但它无法正常工作，然后将其卸载，

已解决：

打开 Nuget Package Manager控制台，

Install-Package BuildBundlerMinifier -Version 2.8.391

再次

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

Answer 10

已安装BuildBundlerMinifier.Core版本（3.0.415）。那没有用，但是BuildBundlerMinifier（3.0.415）的非核心版本运行良好（在asp.net core 2.2项目中）。

Answer 11

除了上面raddevus给出的答案外；在Visual Studio中打开任务浏览器，展开bundleconfig.json；右键单击更新所有文件，然后选择绑定，然后选择构建后 ... tad-dah！

.NET Core2.0 bundleconfig.json无效

11 个答案: