一、前置步骤
首先,我们需要知道的是,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