Gulp系列教程：生成CSS精灵图

这是Gulp系列教程的第十部分。今天我会用Gulp.js创建CSS精灵图。

只是为了确保每个人都知道我在说什么：CSS精灵图是把一系列图片放到一张图上。这样可以减少请求数因而网页加载更快。CSS会把每个图标移动到正确位置。

CSS精灵图不再像过去那样常用，因为SVG或矢量字体。但是我仍将它们作为不支持矢量字体浏览器的备用方案。

我需要Gulp.js的Spritesmith插件：

$ npm install --save-dev gulp.spritesmith@4.1.1    // gulp/config.js     sprites: {    src: srcAssets + '/images/sprites/icon/*.png',    dest: {      css: srcAssets + '/scss/base/',      image: srcAssets + '/images/sprites/'    },    options: {      cssName: '_sprites.scss',      cssFormat: 'css',      cssOpts: {        cssClass: function (item) {          // If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')          if (item.name.indexOf('-hover') !== -1) {            return '.icon-' + item.name.replace('-hover', ':hover');            // Otherwise, use the name as the selector (e.g. 'home' -> 'home')          } else {            return '.icon-' + item.name;          }        }      },      imgName: 'icon-sprite.png',      imgPath: '/assets/images/sprites/icon-sprite.png'    }  }

我把配置分成三个部分：源文件（用来生成精灵图的独立图标），精灵图目标文件以及生成精灵图的CSS部分和配置。我使用传统的 cssClass 通过给 hover 的图标添加命名 -hover 用来生成 :hover 状态。

//gulp/tasks/development/sprites.js      var gulp        = require('gulp');  var spritesmith = require('gulp.spritesmith');  var config      = require('../../config').sprites;    /**   * Generate sprite and css file from PNGs   */  gulp.task('sprites', function() {      var spriteData = gulp.src(config.src).pipe(spritesmith(config.options));      spriteData.img      .pipe(gulp.dest(config.dest.image));      spriteData.css      .pipe(gulp.dest(config.dest.css));  });

最后我得到了两个文件：一部分文件 _sprites.scss 包含class属性和一个精灵图 icon-sprite.png 包含所有图片。

所有开发任务都完成了。我们现在有了一个运行中的开发服务器，创建Jekyll站点的任务以及所有用来检测，精灵图和矢量字体创建的资源和任务。

下一步我将创建用来完成生产代码的任务。