图文实操详解前端处理小图标的那些解决方案

前言

在开始本文之前，我们先做一个选择题：前端开发使用构建工具的目的是什么？

      A、因为现在流行node.js，都在使用构建工具

      B、让前端开发变得高大上，和后端一样编译才能运行

      C、让自动化工具替代重复的手工操作，比如合并代码，刷新浏览器预览效果等。

选择A、B请直接关闭此文，选择C请继续阅读。

其实使用工具的目的就一个： 自动化一些重复操作，提升工作效率。ok，明确了这一点之后再来探究有哪些方式，可以把一堆小图标合并成一个图片文件并生成相应的样式。

按照生成文件和使用方式来看，可以大致分成3类处理方式：

png sprite
 

合成雪碧图是历史最悠久最成熟的解决方案，把不同的png小图标拼接成一张png图片。

手动操作

有的公司甚至让UI设计师来合并小图标（UI设计师成了自动化工具，囧~），这样做减少前端工作量的同时也带来一些问题。

• 沟通问题。如果只想简单地修改某个图标颜色，大小，都要与设计师沟通，一来一回增加时间成本。
• 样式问题。设计师提供的小图标不能直接用，要配合特定的样式（偏移值，大小）才行。
• 命名问题。即使有犀利的设计师提供了css文件，样式类的命名也难以符合前端开发规范和需求（真有这样的设计师欢迎私信推荐给我(●^◡^●)）
   

所以这种处理方式不推荐也不在我们的讨论范围之列。

自动化工具
 

当我们拥有了自动化工具的时候，部分问题就可以对整个流程进行优化了。

1. 根据psd切出小图标（前端必备，自己动手，丰衣足食），并把小图标放入源文件夹。
2. 构建工具自动生成图片和css文件，并根据小图标名生成对应的样式名。
3. 代码中引入样式和图片。

配置文件

以 npm 的 gulp.spritesmith 模块为例实现整个流程。

这是 gulpfile.js 中配置的任务：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('png', function () {
  gulp.src('./src/*.png')
    .pipe($.spritesmith({
      imgName: 'icon.png',  //参数，生成图片文件名
      cssName: 'icon.css',  //参数，生成的样式文件名
      cssTemplate: './src/png_template.hbs'  //参数，样式文件模板的路径，默认使用的是handlerbars模板
    }))
    .pipe(gulp.dest('dist/png'));
});

功能比较强大，除了css文件外还可以生成scss和less文件，同时也可以用模板文件对其进行格式化。这里我自定义了一个 png_template.hbs 文件，内容如下：

// 主要增加了一个通用样式，给图标赋予内联块级样式
.icon {
  display: inline-block;
}
{{#sprites}}
.icon-{{name}} {
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/sprites}}

开发流程

配置完成之后，在源文件夹中放入两个 question.png、hook.png 两个小图标进行调试。

gulp 处理后生成了两个文件：icon.css、icon.png。 打开 icon.css，可以看到根据图标名生成了两个样式类：

.icon {
  display: inline-block;
}
.icon-hook {
  background-image: url(icon.png);
  background-position: -40px 0px;
  width: 16px;
  height: 16px;
}
.icon-question {
  background-image: url(icon.png);
  background-position: 0px 0px;
  width: 40px;
  height: 40px;
}