nuget.server包_一周最佳NuGet软件包-ASP.NET Sprite和图像优化

nuget.server包

I was thinking since the NuGet .NET package management site is starting to fill up that I should start looking for gems (no pun intended) in there. You know, really useful stuff that folks might otherwise not find. I'll look for mostly open source projects, ones I think are really useful. I'll look at how they built their NuGet packages, if there's anything interesting about the way the designed the out of the box experience (and anything they could do to make it better) as well as what the package itself does.

自从NuGet .NET程序包管理网站开始填充以来，我一直在思考，我应该开始在其中查找gem(无双关语)。 您知道的，否则人们可能找不到真正有用的东西。 我会寻找大多数开源项目，这些项目我认为真的很有用。 我将看看他们如何构建他们的NuGet软件包，如果关于开箱即用体验的设计方式(以及他们可以做得更好的任何方式)以及软件包本身的功能有什么有趣的事情。

Sprite和图像优化预览3 (Sprite and Image Optimization Preview 3)

First, I noticed that the ASP.NET Sprite and Image Optimization preview has been updated to Preview 3. These is an example of something that Microsoft might ship with a future version of ASP.NET, but that you can use today. It's even easier because it's in NuGet.

首先，我注意到ASP.NET Sprite和Image Optimization预览已更新为Preview 3 。 这些是Microsoft可能随ASP.NET的将来版本提供的示例，但您可以在今天使用。 因为它在NuGet中，所以更容易。

They've structured this nicely. There are three packages, in fact, with the "leaf" packages depending on the Core.

他们对此进行了很好的构造。 实际上，共有三个包，其中“ leaf”包取决于Core。

• AspNetSprites-Core

  AspNetSprites-Core

• AspNetSprites-WebFormsControl

  AspNetSprites-WebFormsControl

• AspNetSprites-MvcAndRazorHelper

  AspNetSprites-MvcAndRazorHelper

This is an API for ASP.NET to automatically generating CSS sprites and inline images. It works in ASP.NET WebForms, MVC as well as Web Pages. Nice example if you're writing a library of your own and you want it to work for all three ASP.NET techniques (remember it's all ASP.NET). All the source is up there.

这是ASP.NET的API，可以自动生成CSS精灵和嵌入式图像。 它可以在ASP.NET WebForms，MVC以及Web页中使用。 如果您正在编写自己的库，并且希望它适用于所有三种ASP.NET技术(请记住都是ASP.NET)，则这是一个很好的示例。 所有来源都在那里。

The idea behind sprites is that if you've got a page with dozens or even hundreds of small images, perhaps icons on the page, you'll be paying for all those HTTP requests. Instead, why not retrieve a single image with the little ones oriented in a grid, then let the browser break them up at runtime with CSS as "sprites." However, the actual creation of those original grid-like images are often a hassle.

Sprite背后的想法是，如果您的页面上包含数十个甚至数百个小图像，甚至页面上的图标，您将为所有这些HTTP请求付费。 取而代之的是，为什么不检索带有面向网格的小图像的单个图像，然后让浏览器在运行时使用CSS作为“精灵”将它们分解。 但是，实际创建那些原始的网格状图像通常很麻烦。

Not only do you have to make the original images, you'll also need to create a CSS file with the relative positions of the image you want in the source image.

您不仅需要制作原始图像，还需要创建一个CSS文件，其中包含所需图像在源图像中的相对位置。

You can also do "inline" images in some new browsers by base-64 encoding small images and putting them inside the img tag on the page itself.

您还可以通过base-64编码小图像并将它们放在页面本身的img标签中，从而在某些新的浏览器中“内联”图像。

WebForms中的ASP.NET Sprites (ASP.NET Sprites in WebForms)

They include a helpful readme.txt (this is a best practice) in the App_Sprites folder that is created when you install the package. Here's the readme. It's nice because it really tells you everything you need to know AND includes pointers to docs. You'd be surprised how few packages do even this. Remember that your NuGet user is likely either IN Visual Studio or NEAR Visual Studio, and since NuGet exists to prevent us from hunting for stuff, don't make your user hunt for things.

它们在安装软件包时创建的App_Sprites文件夹中包含有用的readme.txt(这是最佳做法)。 这是自述文件。 很好，因为它确实告诉您所有您需要了解的内容，并且包括指向文档的指针。 您会惊讶地发现很少有软件包能做到这一点。 请记住，您的NuGet用户很可能在Visual Studio或NEAR Visual Studio中，并且由于NuGet的存在是为了防止我们寻找东西，所以请不要让您的用户寻找东西。

For detailed information on ASP.NET Sprites and the Image Optimization Framework, go to http://aspnet.codeplex.com/releases/view/61896

QUICK START:

1) Add your images to the "App_Sprites" directory.
2) Depending on your application type:

****************************
*** ASP.NET Web Forms 4 ****
****************************


   
   
   
   

**********************************
*** ASP.NET MVC 3 (ASPX Views) ***
**********************************




********************************************************
*** ASP.NET MVC 3 (Razor Views) or ASP.NET Web Pages ***
********************************************************

@Sprite.ImportStylesheet("~/App_Sprites/")
@Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg")

I fire up Visual Studio and make a new ASP.NET WebForms project. Remember I can use NuGet from the command line, from within VS with a dialog, or from within VS using PowerShell.

我启动Visual Studio并创建一个新的ASP.NET WebForms项目。 记住，我可以从命令行，在VS中使用对话框或在VS中使用PowerShell使用NuGet 。

I right-click on the References folder in the Solution Explorer, and search for "Sprite" online. I'll install the AspNetSprites-WebFormsControl.

我在解决方案资源管理器中的“引用”文件夹上单击鼠标右键，然后在线搜索“ Sprite”。 我将安装AspNetSprites-WebFormsControl。

 

Now, I just add some images to the App_Sprites folder. Here's my images in Explorer:

现在，我只是将一些图像添加到App_Sprites文件夹中。 这是我在资源管理器中的图像：

Next, I just run the application once. Look at the same folder now. Note the sprite0.png? (Of course there are settings you can override.) See how the new sprite file is a merge of all the little images?

接下来，我只运行一次应用程序。 现在查看同一文件夹。 注意sprite0.png吗？ (当然，您可以覆盖某些设置。)看看新的Sprite文件如何合并所有小图像？

There's also new .CSS files as well with new CSS classes to access each one. Very cool.

还有新的.CSS文件以及新CSS类，以访问每个类。 很酷。

.camera-png
{
width:48px;
height:48px;
background-image:url(sprite0.png);
background-position:-0px -0px;
}

However, with WebForms I never have to worry about this stuff. Remember that WebForms is about controls. I can add this control and WebForms will handle the IMG tag and the CSS tag.

但是，有了WebForms，我永远不必担心这些东西。 请记住，WebForms与控件有关。 我可以添加此控件，然后WebForms将处理IMG标记和CSS标记。

   
   ImageUrl="~/App_Sprites/video.png" />

And the image is output like this for maximum compatibility.

并以这种方式输出图像以获得最大兼容性。

Pretty cool.

很酷

ASP.NET MVC中的ASP.NET Sprites(作为Razor帮助器)(ASP.NET Sprites in ASP.NET MVC (as a Razor Helper))

Now, if I do the same thing, except install-package AspNetSprites-MvcAndRazorHelper in an ASP.NET MVC project.

现在，如果我做同样的事情，除了ASP.NET MVC项目中的安装包AspNetSprites-MvcAndRazorHelper 。

For an ASP.NET MVC project, I add the CSS manually in the of my _Layout.cshtml:

对于ASP.NET MVC项目，我在_Layout.cshtml的中手动添加了CSS：

@Sprite.ImportStylesheet("~/App_Sprites/")

And then I use the Sprite helper wherever I want see an image:

然后在需要查看图像的地方使用Sprite助手：

@Sprite.Image("~/App_Sprites/video.png")

Works exactly the same as the WebForms one, except the usage feels more like MVC. Again, this package is a nice example of how one library can be made available for WebForms, WebPages and MVC.

除了使用感觉更像MVC之外，其工作原理与WebForms完全相同。 同样，此软件包是一个很好的示例，说明如何使一个库可用于WebForms，WebPages和MVC。

Feel free to recommend cool NuGet libraries in the comments and I'll add them to what I expect will be a very large queue!

随意在评论中推荐酷的NuGet库，我会将它们添加到我期望会很长的队列中！

Related Links

相关链接

• Updating and Publishing a NuGet Package - Plus making NuGet packages smarter and avoiding source edits with WebActivator

  更新和发布NuGet软件包-加上使NuGet软件包更智能并避免使用WebActivator进行源代码编辑

• Creating a NuGet Package in 7 easy steps - Plus using NuGet to integrate ASP.NET MVC 3 into existing Web Forms applications

  通过7个简单的步骤创建NuGet包-加上使用NuGet将ASP.NET MVC 3集成到现有Web Forms应用程序中的步骤

• ASP.NET MVC3, WebMatrix, NuGet, IIS Express and Orchard released - The Microsoft January Web Release in Context

  发布了ASP.NET MVC3，WebMatrix，NuGet，IIS Express和Orchard-上下文中的Microsoft January Web版本

• VIDEO: PDC10: Building a Blog with Microsoft "Unnamed Package of Web Love"

  视频： PDC10：使用Microsoft“未命名的Web Love包”构建博客

• http://stats.nuget.org

  http://stats.nuget.org

翻译自: https://www.hanselman.com/blog/nuget-package-of-the-week-1-aspnet-sprite-and-image-optimization

nuget.server包