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'
  }
}</pre> 
 
 我把配置分成三個部分：源文件（用來生成精靈圖的獨立圖標），精靈圖目標文件以及生成精靈圖的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));
});</pre>
 最后我得到了兩個文件：一部分文件 _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/ 。 
</div>
</div>
來自： http://www.w3cplus.com/workflow/gulp-tutorial-10-generating-sprites.html