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

时间:2017-01-07 03:24:52

标签: visual-studio-2015 asp.net-core visual-studio-extensions

最近,我使用ASP.NET Core开发我的项目。我有一个这样的问题:我想在我的View页面中引用很多cssjs文件,所以如果它存在一个可以将一些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文件?

1 个答案:

答案 0 :(得分:2)

有多种方法可以使用Bundler&amp; asp.net核心项目中的Minifier。最常见的是使用 BundlerMinifier.Core 工具

要使用BundlerMinifier.Core工具,只需在现有project.json文件的tools部分中添加对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

Visual Studio还有一个Bundler & Minifier extension可以帮助您捆绑和缩小文件。