将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

参考学习地址：https://idiotwu.me/css3-running-animation/