gulp.js - 自动化构建工具之自动合成雪碧图

众所周知前端优化其中之一就是合并图片，其工作量也是挺大的，通过ps切除图片然后拼成一张图，还要量出具体的坐标，相当麻烦，接下来我们通过gulp自动化构建工具轻松完成自动合成雪碧图。
第1步：安装gulp，首先通过cmd进入工程目录下执行以下命令
html 代码

nmp install gulp

image

出现黄色目录结构说明已经安装成功
第2步：安装gulp.spritesmith插件执行以下命令
html 代码

npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith

第3步：在工程目录下新建Gulpfile.js文件，
方式一:通过函数的形式生成css文件
html 代码

var gulp=require("gulp"),
    spritesmith=require('gulp.spritesmith');

gulp.task('default', function () {
    return gulp.src('img/*.png')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: 'img/f_sprite.png',//保存合并后图片的地址
            cssName: 'css/style.css',//保存合并后对于css样式的地址
            padding:5,//合并时两个图片的间距
            algorithm: 'top-down',//注释1
            cssTemplate:function (data) {
                var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-position: "+sprite.px.offset_x+"  "+sprite.px.offset_y+";"+
                    "width:"+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}\n");
                });
                return arr.join("");
               }
        }))
        .pipe(gulp.dest(''));
});

方式二：是以css模版的形式生成css
html 代码

/引入gulp
var gulp=require("gulp"),
    spritesmith=require(‘gulp.spritesmith‘);

gulp.task(‘default‘, function () {
    return gulp.src(‘images/*.png‘)//需要合并的图片地址
        .pipe(spritesmith({
            imgName: ‘sprite.png‘,//保存合并后图片的地址
            cssName: ‘css/sprite.css‘,//保存合并后对于css样式的地址
            padding:5,//合并时两个图片的间距
            algorithm: ‘binary-tree‘,//注释1
            cssTemplate:"css/handlebarsStr.css"//注释2
        }))
        .pipe(gulp.dest(‘dist/‘));
});

//注释1含义：
Algorithm 有四个可选值分别为top-down、left-right、diagonal、alt-diagonal、binary-tree 代表生产图片的布局：如图

image

//注释2含义：
cssTemplate 是生成css的模板文件可以是字符串也可以是函数。是字符串是对于相对于的模板地址 对于模板文件样式格式是：
html 代码

{{#sprites}}
.icon-{{name}}{
    background-image: url("{{escaped_image}}");
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};
}
{{/sprites}}

以上就是实现将css代码中的切片图片合并成雪碧图的实现