Grunt学习——创建子图集

注：此篇文章是《JavaScript Web应用开发》的学习笔记！

图像往往是Web应用中最耗资源的，我们应该尽量通过一些技术手段减少对服务器的请求数量，而不是一味地使用更好更贵的硬件来提升。

子图集是由多张图像而成的一个大图像文件。有了它我们便可以使用background-position，width，height这三个CSS属性从子图集中选择需要的图像。它也是对静态资源的打包，不过打包的是图像。

在web领域，图标和各种小图像最适合使用子图集。自己维护子图集表单和对应的CSS是件很麻烦的事，不过npm有一些现成的包能自动生成CSS子图集映射。比如grunt-spritesmith。

grunt.initConfig({
sprite: {
icons: {
src: 'src/img/icons/*.png',
dest: 'build/img/icons.png',
destCss: 'build/css/icons.css'
}
}
});

属性名称跟书本的不大一样，可能是版本问题。所以一开始按着书本写的时候一直报错，这也提醒我们，书本的东西即便再新，总还会有些时延的。



这是插件生成的CSS文件，有了它便可以“裁剪”子图集表单的不同部分，获取想要的图标。例：

.icon-email-error {
background-image: url(../img/icons.png);
background-position: 0px 0px;
width: 16px;
height: 16px;
}
.icon-eye {
background-image: url(../img/icons.png);
background-position: 0px -16px;
width: 16px;
height: 12px;
}
.icon-ponyfoo {
background-image: url(../img/icons.png);
background-position: -16px 0px;
width: 16px;
height: 16px;
}