使用Visual Studio创建图片精灵（Image Sprite）——Web Essential

原文：Creating Image Sprite in Visual Studio - Web Essential

译者注：有关图片精灵的信息请参阅http://baike.baidu.com/view/2173476.htm。

通过本文，可以学习到如何使用Visual Studio的Web Essential扩展来创建图片精灵。假如你有一个网站，使用了大量的图像，且每个图像都是通过独立的请求加载的，那么请求的数量就会增加，这样，网站速度就会变慢。而这就需要进行优化，以加快网站速度。

图片精灵是一种将多个图像合成为一个大图像的排序技术，这样，网站就只需要加载一个文件而不是多个文件，从而可以加快网站速度。

下面先来了解一下Web Essential是什么，然后再看看如何在Visual Studio IDE中创建图片精灵。

Web Essential

Web Essentials为Visual Studio扩展了一些新功能，不过已经被Web开发人员遗忘很多年了。

如果你要编写CSS、HTML、JavaScript、TypeScript、CoffeeScript或者LESS，那么，你将会发现有许多有用的功能可以让你作为一个开发人员的生活更轻松。

该扩展主要面向的是所有使用Visual Studio的Web开发人员。它在2012年8月由Mads Kristensen首次提出。


基于Visual Studio 2013的Web Essentials 1.7现在让图像处理比以往简单了很多。

如果你还没有将该扩展安装到你喜爱的Visual Studio IDE中，那么你将会错过很多功能，你可以从快速的从这里去下载它。

现在，让我们来探讨一下如何去创建图像精灵。

将粘贴板中的图像粘贴到Visual Studio编辑器中

在Web Essential包含此功能之前尽管有许多不同的方法来创建图片精灵，但使用Visual Studio Web Essential扩展可以让该工作比之前的方法更简单。下面，按照以下步骤去做。

第一步：选择图片并右击选择的图片>Web Essentials>Create Image Sprite...

在单击“Create p_w_picpath sprite”后，它会让你输入精灵名称，输入名称并单击保存按钮。默认情况下，新的精灵会被添加到p_w_picpaths目录。

第2步：展开精灵树（如上图），会立即在精灵树下看到.png文件。这些.png文件实际上就是单一图像中所包含的我们在创建精灵时选择的小图片。如下图。

第3步：展开MySprite.png文件，会找到.css、.less、.map和.scss文件，这些文件用途不大，只是精灵的备份，不过将他们留在项目里很重要。

如果打开MySprite.png.css文件，会看到一些CSS代码，可以将这些代码复制到原来的样式文件之中（site.css）。以下是MySprite.png.css文件的屏幕截图。

在上图中可以看到每一个小图片的定义，这些小图片是根据他们在大图片的位置来进行显示的。

将这些样式复制到Site.css文件或者其他的样式文件。

第4步：现在，为了能使用这些CSS，也就是新的图片精灵，需要在DOM中使用以下标记：

<div class="orderedList0"></div>
<div class="orderedList1"></div>
<div class="orderedList2"></div>
<div class="orderedList3"></div>
<div class="orderedList4"></div>

可以看到，在这里使用了类选择器来将CSS文件映射到样式。

我为这录了一个Hindi视频。如果你不了解Hindi，可以查看以上步骤。

译者注：要看视频请访问源地址。

作者：Abhimanyu Kumar Vatsa, Microsoft MVP in ASP.NET/IIS | Author | IT Faculty | Student of M.Tech. IT, works as an Assistant Lecturer in Coxtan College, Bokaro.Know More