【实战】使用 BundleTransformer 替换 System.Web.Optimization

小渣渣

需求：微软 ASP.NET MVC 自带的 System.Web.Optimization（也称为 Microsoft ASP.NET Web 优化框架）的模块化扩展已经过时了，很久没有更新（最后一次更新时间：2014/2/20，有一些 BUG 也没人修复），引入 bootstrap 4 会报错，使用第三方 Bundle Transformer 来替换默认的。

关于捆绑压缩：https://learn.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

System.Web.Optimization：F:\...\packages\Microsoft.AspNet.Web.Optimization.1.1.3\lib\net40\System.Web.Optimization.dll

NuGet 地址：https://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization

System.Web.Optimization 在捆绑压缩 Bootstrap 4 会报错如下：

/* 未能缩小。正在返回未缩小的内容。
(6,10): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,74): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,122): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,138): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,153): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,168): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,181): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,196): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,216): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,234): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,254): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,272): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,287): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,305): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,322): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,338): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,353): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,371): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,393): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,415): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,437): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,460): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,644): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
*/
/*!
* Bootstrap v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Bundle Transformer

Bundle Transformer - System.Web.Optimization（也称为 Microsoft ASP.NET Web 优化框架）的模块化扩展。StyleTransformer和ScriptTransformer类，包含在Bundle Transformer的核心并实现IBundleTransform接口。它们旨在替换标准类：CssMinify和JsMinify.

StyleTransformer和类与标准实现的主要区别ScriptTransformer：从目录中添加资产时排除不必要资产的能力，不会产生预先缩小资产的重新缩小，支持在 CSS 代码中将相对路径自动转换为绝对路径（通过使用UrlRewritingCssPostProcessor) 等。这些类不会在运行时产生代码的缩小，但可以通过安装 minifier-modules 来添加此功能（现在可用的模块基于Microsoft Ajax Minifier、YUI Compressor for .NET、NUglify、Google Closure编译器、Douglas Crockford 的 JSMin、Dean Edwards 的 Packer、Mihai Bazon 的 UglifyJS、Sergey Kryzhanovsky 的 CSSO（CSS 优化器）、WebGrease和Clean-css）。此外，您还可以安装翻译模块，实现中间语言（LESS、Sass、SCSS、CoffeeScript、TypeScript、Mustache（使用Hogan）和Handlebars的代码翻译）。除此之外，在 Bundle Transformer 中还有第三种类型的模块——后处理器。后处理器在翻译器之后和压缩器之前运行。现在可以使用以下后处理器：URL 重写 CSS 后处理器（包含在核心中）和基于Andrey Sitnik 的 Autoprefixer 的后处理器模块。

GitHub 地址：https://github.com/Taritsyn/BundleTransformer
文档教程：https://github.com/Taritsyn/BundleTransformer/wiki/Examples-of-usage

BundleTransformer.Core 只是提供捆绑功能，并不提供压缩混淆等功能，如果需要压缩等功能需要引入其它模块，本文使用 BundleTransformer.NUglify 扩展模块对捆绑后的 css 和 js 进行压缩输出。

BundleTransformer.NUglify 包含两个minifier适配器：“NUglifyCssMinifier”（用于CSS代码的小型化）和“NUglifyJsMinifier”（用于JS代码的微型化）。这些适配器通过使用NUglify执行缩小(https://github.com/trullock/NUglify).

所以，项目直接引入 BundleTransformer.NUglify 即可，NuGet 命令如下：

登录可见。

安装完成后，修改 BundleConfig.cs 配置，代码如下：

登录可见。

此时，访问 /Plugins/site/login 链接，css 资源并没有被压缩，还需要修改 web.config 的配置，使“NUglifyCssMinifier”成为默认的 CSS minifier 程序。

其中 UrlRewritingCssPostProcessor：支持在 CSS 代码中将相对路径自动转换为绝对路径等。

找到 web.config 文件的 /configuration/bundleTransformer/core/css 节点，修改如下：

登录可见。

完整的配置如下：

登录可见。

（完）

fyxh66

学习一下看看

小渣渣

ASP.NET Core（十二）前端 JS、CSS 捆绑和压缩
https://www.itsvse.com/thread-10282-1-1.html

Asp.net mvc bundle将所有css文件打包在一起
https://www.itsvse.com/thread-4921-1-1.html