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
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