将png图片序列生成雪碧图
一、前置步骤
首先，我们需要知道的是，Gulp和所有Gulp插件都是基于nodeJS来运行的，所以需要电脑首先安装nodejs，完成nodejs后。
下载nodejs在官方网站下载：https://nodejs.org/en/
选择相应的格式下载，下载后安装即可，
安装成功后打开控制台，运行命令 node -v 会显示如下图所示：
如果机器上已经配置nodejs环境，可以忽略以上步骤。
1.使用gulp，需要下载gulp。 nodejs安装后默认会自带npm命令。
首先安装gulp包
运行命令
npm install --global gulp
安装完成后，输入gulp
-v然后回车，看到有版本号，证明gulp安装成功。如下图：
接下来，我们可以创建一个工程文件夹，例如 gulptest，并且命令行转入到该文件夹。
可以尝试运行命令gulp，会提示如下信息：
下一步需要 运行 npm install --save-dev gulp 在此工程文件夹下会出现：
在此工程的根目录下创建gulpfile.js文件：
可以在控制台运行命令 gulp，出现如下示图，说明gulp可以成功运行：
具体可参照：gulp官网
正文
下面开始进行合成：
1.生成雪碧图，需要引入雪碧图合成插件 gulp.spritesmith。
运行命令安装：npm install --save-dev gulp.spritesmith
安装成功后，我们可以引入此插件使用。
2.首先我们可以把需要合并的png序列图放入到该目录下：
现在开始在gulpfile.js代码
如下：
var gulp=require('gulp');
//引入雪碧图合成插件
var spritesmith=require('gulp.spritesmith');
gulp.task('default',function(){
gulp.src('person/*.png')
.pipe(spritesmith({
imgName:'person/sprite.png', //保存合并后的名称
cssName:'css/sprite.css', //保存合并后css样式的地址
padding:0, //合并时两个图片的间距
algorithm:'left-right', // Algorithm 有五个可选值分别为：top-down、left-right、diagonal、alt-diagonal、binary-tree
cssTemplate:function(data){ //如果是函数，这样写
var arr=[];
var i = 0;
arr.push(" keyframes run {\n");
data.sprites.forEach(function (sprite){
arr.push(
i+"%{"+
"background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"
+"}\n"
);
i++;
});
arr.push("}\n")
return arr.join("");
}
}))
.pipe(gulp.dest('dest/')); //输出目录
});
执行完，工程目录下会多出dest文件目录。
person文件目录下就是合并生成的一张雪碧图。
这样我们就能利用 CSS3 的 keyframes 自定义动画。
具体一些参数如下：
更多参数信息：可以访问这里https://www.npmjs.com/package/gulp.spritesmith
