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站点的任务以及所有用来检测，精灵图和矢量字体创建的资源和任务。

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

源代码

在GitHub上查看源码

总结

这是Gulp系列教程的第十部分的总结。今天我们学习了如何使用Gulp.js和Spritesmith创建CSS精灵图。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 10: Generating CSS Image Sprites》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-10-generating-sprites/。