grunt 中应用 grunt-spritesmith

grunt-spritesmith插件地址：https://github.com/Ensighten/grunt-spritesmith

grunt-spritesmith：Grunt task for converting a set of images into a spritesheet and corresponding CSS variables. 翻译过来就是：grunt-spritesmith是一个grunt任务，它把一些图片转换合成一张图片精灵并修改相应的css中的值。

① 在已有的grunt项目中添加安装 grunt-spritesmith 插件：

npm install grunt-spritesmith --save<pre name="code" class="plain">npm install grunt-spritesmith --save-dev

② 编写 grunt.js 文件,下面列出相关配置

module.exports = function (grunt) {  // Time how long tasks take. Can help when optimizing build times  require('time-grunt')(grunt);  // Automatically load required grunt tasks  require('jit-grunt')(grunt, {      useminPrepare: 'grunt-usemin',      sprite: 'grunt-spritesmith' //别名  });  grunt.initConfig({...    sprite:{      all: {        src: '<%= config.app %>/images/sprite/*.png',        dest: '<%= config.app %>/images/spritesheet.png',        destCss: '<%= config.app %>/styles/_icon.scss',        // imgPath: '', //指定css样式表中 img路径        padding: 10,        // algorithm: 'left-right', // 图标在 spriesheet中的排列方式        algorithmOpts: {sort: true} //图标排列 是否按顺序        // engine: , 现在安装的是gm        // imgOpts: {quality: 10}        //可选: 指定CSS格式 (默认根据destCSS中的后缀设置格式)        // (stylus, scss, scss_maps, sass, less, json, json_array, css)        // cssFormat: ,        // cssTemplate: ,        // cssHandlebarsHelpers: ,        // cssVarMap: ,        // cssSpritesheetName: ,        // cssOpts: ,      }    }...})... //这里根据具体业务定义何时执行 任务sprite