受欢迎的博客标签

Minifying Inline Css, Js and Html using package BuildBundlerMinifier in ASP.NET Core

Published

office doc:https://docs.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-3.1

引言 我们在ASP.NET Core MVC 中经常会用到 bundleConfig.cs 文件来进行我们 css 和 js 的绑定, 那么在ASP.NET Core 中我们应该如何使用呢?

 

步骤一 新建bundleconfig.json 文件

在项目的根目录下,新建一个文件名为bundleconfig.json 的文件。在这个文件里,我们配置哪些css和js需要压缩,压缩后的文件存放在哪个目录下。

[
  {
    // 要输出的捆绑文件名称。 可以包含中的相对路径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 },
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    //  指示是否生成捆绑的文件的源映射的标志。 可选,默认-false
    "sourceMap": false,
    // "指示是否将生成的文件添加到项目文件的标志。" "可选,默认-false",
    "includeInProject": true
    // 用于存储生成的源代码映射文件的根路径。
    //"sourceMapRootPath": ""
  }
]

参数说明
-outputFileName:要输出的压缩文件的相对路径。
-必填
-inputFiles:要输出的压缩文件的相对路径。
- 可选,为空则输出空文件
- 空值会在空的输出文件。 支持组合模式
- 组合模式 栗子:"inputFiles": ["wwwroot/**/*(*.css|!(*.min.css)"] 将获取所有 CSS 文件,不包括缩减的文件模式。

-minify:压缩选项的配置
- 默认启用压缩,更多配置见BundlerMinifier-Wiki
- 可选
-includeInProject:将生成的文件添加到项目文件 (默认的文件中也没有这个选项)
- 文档写的是 默认false,在vs中转到定义查看是true 。囧,默认是没有这个参数的
-sourceMaps:生成捆绑的文件的源映射
-默认false

 

步骤二 执行捆绑和缩小

需要选择一种bundling and minification生成工具,按我们上述设定的配置生成新的压缩文件。

生成的工具很多种,如,BundlerMinifier,Gulp等,我们需要选择其中的一种。

2.1 手工生成方式

如果用手工生成方式,可选用下面的方式中其中的一种:

2.1.1 在vs工具栏手工生成

需要安装Bundler和Minifier Visual Studio扩展,然后手工一次性生成。

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

2.1.2 在命令行控制台手工生成,选择生成工具BundlerMinifier.Core

BundlerMinifier.Core 属于 GitHub 上的社区驱动项目,此包扩展 .NET Core CLI 以包含 dotnet-bundle 工具 。

修改\Presentation\Nop.Web\Nop.Web.csproj,添加下面的语句:

  <ItemGroup>   
    <DotNetCliToolReference Include="BundlerMinifier.Core" Version="3.2.447" />   
  </ItemGroup>

如果你用NuGet 包管理器将依赖项添加到 *.csproj 文件,它将作为 <PackageReference /> 节点。

<ItemGroup>   
    <ProjectReference Include="BundlerMinifier.Core" Version="3.2.447" />   
  </ItemGroup>

需要修改成为<DotNetCliToolReference />节点,因为仅当使用 <DotNetCliToolReference /> 节点时,才使用 .NET Core CLI 注册 dotnet bundle 命令。

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <MvcRazorCompileOnPublish>false</MvcRazorCompileOnPublish>
  </PropertyGroup>

  <ItemGroup>   
    <DotNetCliToolReference Include="BundlerMinifier.Core" Version="3.2.447" />   
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\..\Libraries\Nop.Core\Nop.Core.csproj" />   
  </ItemGroup>

</Project>

执行命令

dotnet restore
dotnet bundle

输出结果如下:

Bundling with configuration from \src\Presentation\Nop.Web\bundleconfig.json
Processing wwwroot/css/site.min.css
Processing wwwroot/js/site.min.js

2.2 在程序编译时生成

2.1 选择工具BundlerMinifier,生成过程如下:

2.2.1 将 BuildBundlerMinifier 包添加到项目 :

dotnet add package BuildBundlerMinifier

2.2.2 生成项目

dotnet build

执行过程中会生成输出文件

2.2.3 将显示以下内容

Microsoft (R) Build Engine version 15.4.8.50001 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.


    Bundler: Begin processing bundleconfig.json
    Bundler: Done processing bundleconfig.json
    BuildBundlerMinifierApp -> C:\BuildBundlerMinifierApp\bin\Debug\netcoreapp2.0\BuildBundlerMinifierApp.dll

 

 

在你的ASP.NET Core 项目的 Web 层中 的 project.json 文件中添加如下配置:

"tools": { "BundlerMinifier.Core": "2.0.238" }, "scripts": { "precompile": [ "dotnet bundle" ] }

步骤三 在 程序包管理器控制台 上输入 dotnet bundle 程序就会自动找到 bundleconfig.json文件 进行编译。 差不多就是这样的啦。

步骤四 如何配置 bundleconfig.json 文件 :

 

参考文献

http://dotnetthoughts.net/bundling-and-minification-in-aspnet-core/ https://github.com/madskristensen/BundlerMinifier/wiki

Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
 for details on configuring this project to bundle and minify static web assets.

 

 .