如何在 Visual Studio 2015 中使用 Bundler & Minifier 工具

Question

最近，我使用ASP.NET Core 开发我的项目。我有一个这样的问题：我想在我的视图页面中引用很多 css 和 js 文件，所以如果它存在，可以将一些 css 或 js 组合成一个的工具.就像关注

<link href="~/Content/css/a1.css" rel="stylesheet" asp-append-version="true" />
<link href="~/Content/css/a2.css" rel="stylesheet" asp-append-version="true" />

我想要的结果是：

<link href="~/bundles/css/a.min.css" rel="stylesheet" asp-append-version="true" />

然后我在 Google 上搜索它，我得到了工具 Bundler& Minifier，Visual Studio 中的扩展。我想知道如何在我的项目中写入 bundleconfig.json 文件？以及如何使用它来合并css或js文件？

Answer 1

在 asp.net 核心项目中，您可以通过多种方式使用 Bundler 和 Minifier。最常见的是使用 BundlerMinifier.Core 工具

要使用 BundlerMinifier.Core 工具，只需在现有 project.json 文件的工具部分添加对 BundlerMinifier.Core 的引用，如下所示：

"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}

添加该工具后，您需要在项目中添加一个 bundleconfig.json 文件，该文件将用于配置您希望包含在包中的文件。最低配置如下所示：

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

配置好捆绑包后，您可以通过以下命令捆绑和缩小现有文件：

dotnet bundle

还有一个 Bundler & Minifier extension 可用于 Visual Studio，它将帮助您打包和缩小文件。

如何在 Visual Studio 2015 中使用 Bundler & Minifier 工具

How to use Bundler & Minifier tool in Visual Studio 2015

visual-studio-extensions

visual-studio-2015

asp.net-core