Fatal编程技术网
  • csharp/
  • C# .NET Core2.0 bundleconfig.json不工作

C# .NET Core2.0 bundleconfig.json不工作

c# asp.net-core

C# .NET Core2.0 bundleconfig.json不工作,c#,asp.net-core,bundle,C#,Asp.net Core,Bundle,我正在努力让捆绑在核心2.0 web应用程序中工作。我的bundleconfig.json文件中有以下内容： [ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/css/bootstrap.min.css", "inputFiles": [

我正在努力让捆绑在核心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
  }
]
我安装了BuildBundlerMinizier 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>


@RenderSection（“脚本”，必需：true）
当我运行应用程序时，不会加载资源。我得到以下错误：

加载源为“”的
失败。
加载源为“”的
失败。
加载源为“”的
失败。
加载源为“”的
失败

有人能帮我吗？

您必须删除URL中的“wwwroot”部分。“wwwroot”是运行应用程序的根文件夹。现在它将搜索“…wwwroot/wwwroot/js…”中的文件，而不是“…wwwroot/js…”。

问题在于路径中没有使用wwwroot。问题在于，您在wwwroot之前使用了~符号，这会告诉浏览器使用根路径（wwwroot）和路径后面的内容（也是wwwroot）

您可以使用绝对路径

"inputFiles": [
      "wwwroot/css/site.css"
    ]
还是相对路径

 "inputFiles": 
      "~/css/site.css"
    ]
两者不能同时使用，因为相对路径用~或../符号来补充完整路径

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

而不是：

{
    "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"
    ]
  }
我无法让这项工作，并了解到，有更多的问题，在目前的时间

默认情况下，dotnet core razor pages项目中没有安装任何捆绑和缩小功能

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

我终于找到了一个Visual Studio加载项

捆绑机和迷你机--手动

相反，我安装了一个手动bundler&minifier——它是由与上面的Nuget pkg相同的作者（Mads Kristensen）编写的。

这是一个VisualStudio扩展，安装后，您可以右键单击任何css或js文件，您将得到一个菜单，允许您“手动”缩小它们。

在生成时启用捆绑…

该选项将警告您它将安装Nuget软件包。我还没那么做

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

produceoutput=true
奇怪的是，它以前不在那里。我知道那个文件以前不存在，因为git告诉我有未跟踪的文件，并提到那个文件

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

更新所有捆绑包 在添加了.bindings文件之后，我再次构建了包，但是包仍然没有构建。 然后我注意到在[Buff]菜单下有另外一个选项，但是我不确定这是否是我安装的捆绑和缩小插件，所以在寻找这个解决方案时你必须考虑。

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

您可以看到Bundler&Minifier在我的项目中将产品输出文件选项设置为true（即使它仍然不工作）

实际上，我更仔细地阅读了下面这句话，我注意到它说，“积极地倾听输入文件的更改”，所以我去更改了我的site.css，并注意到site.css中的值确实更新了

做出改变，然后再改变

奇怪的是，如果你删除了你的site.min.css，那么它似乎不会在任何时候重新生成。我想现在如果你这样做了，你可以做一个改变，然后把它改回来，min文件就会被创建

我对此进行了测试：删除site.min.css，然后进行了更改，文件再次生成。奇怪的是，该版本没有启动此功能。

根据Microsoft提供的文档

NuGet包支持在构建时执行绑定和缩小

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

安装后VS 2017 Community 2017，版本15.8.9

捆绑和缩小停止工作

在NuGet中安装不起作用

所以，在工具菜单中，扩展和更新，在更新捆绑和缩小，并重新启动VS后，它开始工作

现在，在选择bundleconfig.json后，右键单击弹出菜单中的“Bundler&Minified”项，显示我今天遇到的问题。对我来说，关键是nuget包（）不足以让它工作。您还需要安装VS扩展。在此基础上，您可以按照以下步骤在构建时启用绑定。请注意，如果您还没有nuget软件包，那么VS扩展也将安装它

关于为什么这不能开箱即用，我相信这是因为这是一个全新的第三方工具 
Install-Package BuildBundlerMinifier -Version 2.8.391