引言 我们在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
输出结果如下:
[32m[1mBundling with configuration from \src\Presentation\Nop.Web\bundleconfig.json[0m[39m[49m
Processing [36m[1mwwwroot/css/site.min.css[0m[39m[49m
Processing [36m[1mwwwroot/js/site.min.js[0m[39m[49m
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.
.