使用ASP.NET Core和SmidgeCSS和JavaScript的轻量级捆绑，最小化和压缩

Yesterday I blogged about WebOptimizer, a minifier that Mads Kristensen wrote for ASP.NET Core. A few people mentioned that Shannon Deminick also had a great minifier for ASP.NET Core. Shannon has a number of great libraries on his GitHub https://github.com/Shazwazza including not just "Smidge" but also Examine, an indexing system, ClientDependency for managing all your client side assets, and Articulate, a blog engine built on Umbraco.

昨天我在博客上发表了WebOptimizer，这是Mads Kristensen为ASP.NET Core编写的一个缩小器。 少数人提到Shannon Deminick对于ASP.NET Core也有出色的简化程序。 Shannon的GitHub https://github.com/Shazwazza上有很多很棒的库，不仅包括“ Smidge ”，还包括索引系统Examine，用于管理所有客户端资产的ClientDependency以及基于该引擎构建的博客引擎Articulate Umbraco 。

Often when there's more than one way to do things, but one of the ways is made by a Microsoft employee like Mads - even if it's in his spare time - it can feel like inside baseball or an unfair advantage. The same would apply if I made a node.js library but a node.js core committer also made a similar one. Many things can affect whether an open source library "pops," and it's not always merit. Sometimes it's locale/location, niceness of docs, marketing, word of mouth, website. Both Mads and Shannon and a dozen other people are all making great libraries and useful stuff. Sometimes people are aware of other projects and sometimes they aren't. At some point a community wants to "pick a winner" but even as I write this blog post, someone else we haven't met yet is likely making the next great bundler/minifier. And that's OK!

通常，当做事的方法不止一种时，但其中一种方法是由像Mads这样的Microsoft员工制定的-即使是在业余时间也是如此-感觉就像是打棒球或不公平的优势。 如果我创建了一个node.js库，但同样适用，但node.js核心提交者也创建了一个类似的库。 许多因素都会影响开放源代码库是否“流行”，而且并不总是值得的。 有时是语言环境/位置，文档的优美程度，市场营销，口碑，网站。 Mads和Shannon以及其他十几个人都在制作出色的库和有用的东西。 有时人们知道其他项目，有时却没有。 在某个时刻，社区希望“选拔赢家”，但是即使在我撰写此博客文章时，我们尚未认识的其他人也有可能成为下一个出色的捆绑器/缩小器。 没关系！

I'm going to take a look at Shannon Deminck's "Smidge" in this post. Smidge has been around as a runtime bundler since the beginning of ASP.NET Core even back when DNX was a thing, if you remember that. Shannon's been updating the library as ASP.NET Core has evolved, and it's under active development.

我要去看看香Deminck的“ 【熊在这个职位”。 自从ASP.NET Core诞生以来，Smidge便一直是运行时捆绑程序，甚至在DNX成为现实的时候(如果您还记得的话)。 随着ASP.NET Core的发展，Shannon一直在更新该库，并且正在积极开发中。

Smidge supports minification, combination, compression for JS/CSS files and features a fluent syntax for creating and configuring bundles

斯米奇 支持JS / CSS文件的最小化，组合和压缩，并具有用于创建和配置包的流利语法

I'll start from "dotnet new mvc" and then:

我将从“ dotnet new mvc”开始，然后：

C:\Users\scott\Desktop\smidgenweb>dotnet add package smidge
  Writing C:\Users\scott\AppData\Local\Temp\tmp325B.tmp
info : Adding PackageReference for package 'smidge' into project 'C:\Users\scott\Desktop\smidgenweb\smidgenweb.csproj'.
log  : Restoring packages for C:\Users\scott\Desktop\smidgenweb\smidgenweb.csproj...
...SNIP...
log  : Installing Smidge 3.0.0.
info : Package 'smidge' is compatible with all the specified frameworks in project 'C:\Users\scott\Desktop\smidgenweb\smidgenweb.csproj'.
info : PackageReference for package 'smidge' version '3.0.0' added to file 'C:\Users\scott\Desktop\smidgenweb\smidgenweb.csproj'.

Then I'll update appSettings.json (where logging lives) and add Smidge's config:

然后，我将更新appSettings.json(记录存在的地方)并添加Smidge的配置：

{
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "smidge": {
    "dataFolder" : "App_Data/Smidge",
    "version" : "1"
  }  
}

Let me squish my CSS, so I'll make a bundle:

让我压缩CSS，然后制作一个捆绑包：

app.UseSmidge(bundles =>
{
   bundles.CreateCss("my-css", "~/css/site.css");
});

I refer to the bundle by name and the Smidge tag helper turns this:

我通过名称引用该包， Smidge标签帮助程序将其变为：

<link rel="stylesheet" href="my-css" /> 

into this

进入这个

<link href="/sb/my-css.css.v1" rel="stylesheet" />

Notice the generated filename with version embedded. That bundle could be one or more files, a whole folder, whatever you need.

注意生成的文件名带有嵌入的版本。 该束可以是一个或多个文件，也可以是整个文件夹，无论您需要什么。

Her eyou can see Kestral handling the request. Smidge jumps in there and does its thing, then the bundle is cached for the next request!

她的eyou可以看到Kestral处理该请求。 Smidge跳进去做它的事，然后为下一个请求缓存包！

info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[1]
      Executing action method Smidge.Controllers.SmidgeController.Bundle (Smidge) with arguments (Smidge.Models.BundleRequestModel) - ModelState is Valid
dbug: Smidge.Controllers.SmidgeController[0]
      Processing bundle 'my-css', debug? False ...
dbug: Smidge.FileProcessors.PreProcessManager[0]
      Processing file '/css/site.css', type: Css, cacheFile: C:\Users\scott\Desktop\smidgenweb\App_Data\Smidge\Cache\SONOFHEXPOWER\1\bb8368ef.css, watching? False ...
dbug: Smidge.FileProcessors.PreProcessManager[0]
      Processed file '/css/site.css' in 19ms
dbug: Smidge.Controllers.SmidgeController[0]
      Processed bundle 'my-css' in 73ms
info: Microsoft.AspNetCore.Mvc.Internal.VirtualFileResultExecutor[1]
      Executing FileResult, sending file 

The minified results are cached wherever you want (remember I said App_Data):

缩小的结果将缓存在您想要的任何位置(请记住我说过App_Data)：

This is a SUPER simple example. You can use Smidge's fluent interface to affect how an individual bundle is created and behaves:

这是一个超级简单的例子。 您可以使用Smidge的流畅接口来影响单个捆绑包的创建和行为方式：

bundles.CreateJs("test-bundle-3", "~/Js/Bundle3")
   .WithEnvironmentOptions(BundleEnvironmentOptions.Create()
      .ForDebug(builder => builder
         .EnableCompositeProcessing()
         .EnableFileWatcher()
         .SetCacheBusterType<AppDomainLifetimeCacheBuster>()
         .CacheControlOptions(enableEtag: false, cacheControlMaxAge: 0))
      .Build()
);

Smidge is unique in its Custom Pre-Processing Pipeline. Similar to ASP.NET Core itself, if there's anything you don't like or any behavior you want to change, you can.

Smidge在其自定义预处理管道中是独一无二的。 与ASP.NET Core本身类似，如果您不喜欢任何东西或想要更改任何行为，则可以。

I'm sure Shannon would appreciate help in Documentation and Open Issues, so go check out Smidge at https://github.com/Shazwazza/Smidge!

我确定Shannon希望在文档和未解决的问题上有所帮助，所以请在https://github.com/Shazwazza/Smidge上查看Smidge！

翻译自: https://www.hanselman.com/blog/lightweight-bundling-minifying-and-compression-for-css-and-javascript-with-aspnet-core-and-smidge