合并图片

[cobish]

一直在寻找更优的方式来解决合并图片问题。这种方式需要满足几个要求：首先它能够将一个或多个 css 文件里引用到的图片合并成一张图片，接着它要能对应地修改 css 里图片的路径，最后它还要能方便维护修改，即如果我想替换图片或增加图片，它能够重新合并图片。

过去都是设计师把所有的小图标合并成一张大的图片，这需要我们不断地去修改 background-position 来调整小图片的显示。这种方式的好处就是前端不需要去合并图片，直接图片拿来使用即可。但它也有一些缺点，图片并不是以最优的方式合并，还可以合并成大小更小的图片；还有就是大图片里的小图标需要更换或是添加的时候，都必须让设计师找到原图进行更改，并且得保证原来的小图标位置不能改动，不然 css 代码也需要随之改动。

后来，网上有很多工具可以帮忙合并图片。尝试过了很多，大致都是你把要合并到一起的图片移到一个框内，然后自己去调整位置。实际上这种做法跟设计师的做法没区别，只不过是前端自己来完成而已，最后还是需要前端自己去调整 css 代码。后来又出现了一些线上的工具，例如「GoPng」。这些工具会根据一定的算法去合并，并且会把 css 代码展示出来给你复制，不需要前端去手动书写引用图片的代码。但是，它们也有缺点，还是不方便更改，一旦图片做了更改，css 代码也会随之更改。

最后，构建工具让我找到了较优的解决方案。可以用到的插件是「grunt-css-sprite」或「gulp-css-spritesmith」。主要策略是有两个目录，一个是保存开发代码的 src 目录，一个是用于上线的 dist 目录。src 目录下用到的都是没有合并的小图片，css 代码引用到的也是各个图片。dist 目录下则是通过插件把图片都合并了，并修改了 css 里的代码。开发期间就使用未合并的图片，上线期间则通过打包工具使用已合并的图片。最后，目录如下：

├─ dist/
    ├─ css/
        └─ login.css
    └─ images/
        └─ icon_sprite.css
└─ src/
    ├─ css/
        └─ login.css
    └─ images/
        └─ login
            ├─ icon_1.png
            ├─ icon_2.png
            └─ icon_3.png