[JavaScript知识库]css sprite雪碧图 打包工具gulp.spritesmith

由于项目用的还是http1，但为了减少http请求次数，所以使用了雪碧图（多个小图标放到一张图里）。一开始也想过用字体库，但有一些图片是设计师设计的，字体库里没有，无奈。

• 计划一：网站合成图片
  很多人可能也会像我图省事直接找现成的在线合成网站（比如：https://www.toptal.com/developers/css/sprite-generator），他还能直接将每个小图标的大小，位置生成出来，很省事。但它有两个缺点：
  1.后期想再往里添加图标的话，每个图标的位置会变。（这个好解决，CSS Satyr v1.2可以通过拖拽的方式合成图片）
  2.图片不高清。（这个很致命，是我放弃这个工具的主要原因）

• 计划二：使用ps手动拼
  ps手动拼的优点是图片质量高，但缺点就是麻烦，原本的单个小图标是有留白的部分的，把它拖到大图的时候，只是内容拖过来了，得自己算好每个小图标留白的部分，否则使用的时候不太好用。工程量太大，果断放弃。

• 最终方案：使用打包工具
  gulp有一个gulp.spritesmith，可以将小图标打包成一个大图标，同时还能生成css文件，并且图片也很高清。
  第一步：安装gulp（安装过的同学可以跳过这步）
  1.前提是安装过node.js
  2.全局安装gulp
  $ npm install -g gulp
  3.检查是否安装成功
  $ gulp -v
[13:38:11] CLI version 3.9.1 //如果出现这一个行表明安装成功
  4.作为项目的开发依赖（devDependencies）安装（这里用yarn）
  $ yarn init -y //这个命令是初始化包管理文件package.json
$ yarn add -D gulp
  5.检查安装的gulp
  $ gulp -v
[13:40:38] CLI version 3.9.1 //这个表示全局安装的gulp的版本信息
[13:40:38] Local version 3.9.1 //这个表示当前目录下安装的gulp的版本信息
  第二步：构建项目目录
  
  第三步：安装 spritesmith
  npm install --save-dev gulp.spritesmith

  第四步：修改gulpfile.js

//引入gulp
var gulp=require("gulp"),
    spritesmith=require('gulp.spritesmith');
//输出原图
gulp.task('sprite', function () {undefined
    return gulp.src('src/static/images/icons/*.png')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: '/static/images/sprite.png',//保存合并后图片的地址
            cssName: '/static/css/sprite.css',//保存合并后对于css样式的地址
            //css background-image: url地址
            imgPath: '/dist/static/images/sprite/sprite.png',
            padding:5,//合并时两个图片的间距
            algorithm: 'binary-tree',//排列方式
            cssTemplate: function (data) {undefined
                var arr=[];
                data.sprites.forEach(function (sprite) {undefined
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-size:"+sprite.px.total_width+" "+sprite.px.total_height+";"+
                    "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('dist/'));
});

//输出0.5倍图
gulp.task('sprite0.5x', function () {undefined
    return gulp.src('src/static/images/icons@0.5x/*.png')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: '/static/images/sprite@0.5x.png', //保存合并后图片的地址
            cssName: '/static/css/sprite@0.5x.css',//保存合并后对于css样式的地址
            imgPath: '/dist/static/images/sprite@0.5x.png',//css background-image: url地址
            padding:5,//合并时两个图片的间距
            algorithm: 'binary-tree',//排列方式
            cssTemplate: function (data) {undefined
                var arr=[];
                data.sprites.forEach(function (sprite) {undefined
                console.log(sprite);
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-size:"+(parseFloat(sprite.px.total_width)/2)+"px "+(parseFloat(sprite.px.total_height)/2)+"px;"+
                    "background-position: "+(parseFloat(sprite.px.offset_x)/2)+"px "+(parseFloat(sprite.px.offset_y)/2)+"px;"+
                    "width:"+(parseFloat(sprite.px.width)/2)+"px;"+
                    "height:"+(parseFloat(sprite.px.height)/2)+"px;"+
                    "}\n");
                });
                return arr.join("");
            }
        }))
        .pipe(gulp.dest('dist/'));
});

第五步：打包
gulp sprite //打包原图
gulp sprite0.5x //打包0.5倍图

注：为什么生成两种大小图？是因为background-size设置百分比，只是设置图片相对于容器大小的百分比，要放大缩小图片的大小只能写具体的数字。