Lia

sprite_conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'use strict';

module.exports = [{
    src: ['*.png'],
    image: 'build/sprite.png',
    style: 'build/sprite.css',
    prefix: '',
    cssPath: './',
    unit: '*@px',
    convert: 1.5,  // 这个根据给的原稿来修改
    decimalPlaces: 6,
    blank: 0,
    padding: 10,
    algorithm: 'left-right',
    tmpl: '',
    psd: '',
    quiet: false
}];

gitHub

Texture Merger

雪碧图工具
下载地址
使用说明
利用Egret Texture Merger和canvas快速开发帧动画

==============================gulp.spritesmith(推荐)================================

安装工具

1
2
npm gulp
npm install gulp-css-spritesmith --save

配置gulp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var gulp = require('gulp'),
    cssSprite = require('gulp-css-spritesmith');
//--------------------------------dropload项目-----------------------------

gulp.task('autoSprite', function() {
    gulp.src('*.css').pipe(cssSprite({
        // sprite背景图源文件夹，只有匹配此路径才会处理，技巧-把需要合并的放在独立文件夹内，默认 static/image/
        imagepath: 'static/image/',
        // 映射CSS中背景路径，支持函数和数组，默认为 null
        imagepath_map: null,
        // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
        spritedest: 'static/sprite/',
        // 替换后的背景路径，默认 ../images/
        spritepath: 'static/sprite/',
        // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
        padding: 4,
        // 是否使用 image-set 作为2x图片实现，默认不使用
        useimageset: false,
        // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
        newsprite: false,
        // 给雪碧图追加时间戳，默认不追加
        spritestamp: true,
        // 在CSS文件末尾追加时间戳，默认不追加
        cssstamp: true,
        // 排列方式为从上至下
        algorithm: 'top-down'
    }))
        .pipe(gulp.dest('publish/'));
});

修改\node_modules\css-spritesmith\lib\css-spritesmith.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//修改1-搜索
var bgPos = ['-'+ x +'rem', '-'+ y +'rem'];
//修改1-替换
var bgPos = ['-'+ x/20 +'rem', '-'+ y/20 +'rem'];     

//修改2-搜索
function processSpriteData(spriteData, cb)     
//修改2-添加
var spriteImgWidth = spriteData.properties.width;
var spriteImgHeight = spriteData.properties.height;
bgSizeX = spriteImgWidth/20;
bgSizeY = spriteImgHeight/20;

//修改3-搜索
var css = 'background-image: url('+ spriteImg +');';
//修改3-替换
var css = 'background-image: url('+ spriteImg +');background-size:' + bgSizeX+'rem '+ bgSizeY +'rem;';

点击下载css-spritesmith

执行

1
gulp autoSprite

封装插件

我自己做了个插件，大家有兴趣可以用一下，是针对1rem = 20px来换算的

1
npm install gulp-css-spritesmith-tentou

https://www.npmjs.com/package/gulp-css-spritesmith-tentou

==============================gulp.spritesmith（不推荐）================================

安装工具

1
2
npm gulp
npm install gulp.spritesmith --save

配置gulp

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp'),
    spritesmith = require('gulp.spritesmith');
    
gulp.task('sprite', function () {
    var spriteData = gulp.src('static/sprites/*.png').pipe(spritesmith({     //这里是要合并的图片地址
        imgName: 'sprite.png',      //这个是输出的文件名
        cssName: 'sprite.css',      //这个是输出的css文件名
        padding: 4                  //间距为4px
    }));
    return spriteData.pipe(gulp.dest('path/to/output/'));       //输出文件的路径
});

执行

1
gulp sprite

修改生成的文件（sprite.css）

  1. 先将所有的px单位换为*@n*(这个单位是令rem的基础单位为1px，大家根据自己图稿来配置)
  2. 然后将width和height修改为background-size
  3. 然后将生成的sprite.png放到存放图片的文件夹
  4. 然后将所有的background-image的地址修改正确
  5. 最后将sprite.css中的属性，分别插入的真正应用的css中就可以了

操作确实繁琐，等node学好后，自己写一个插件好了，敬请期待~~~~

直接修改gulp.spritesmith

1.首先修改\node_modules\spritesheet-templates\lib\spritesheet-templates.js

1
2
3
4
5
['x', 'y', 'offset_x', 'offset_y', 'height', 'width', 'total_height', 'total_width'].forEach(function (key) {
    if (item[key] !== undefined) {
      px[key] = item[key]/64 + 'rem';
    }
  });

修改的地方是item[key]/64+’rem’;这句，我的是设置了640px宽度，所以这里除以64来转换得到rem值。

2.修改\node_modules\spritesheet-templates\lib\templates\css.template.handlebars
在模板页中加入生成background-size内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{{/block}}
{{#block "sprites"}}
.cicon {
    display: inline-block;
    background-size: {{spritesheet.px.width}} {{spritesheet.px.height}};
}
{{#each sprites}}
{{{selector}}} {
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/each}}
{{/block}}

主要添加了加粗的代码行。以上两点修改完成就可以把spritesmith生成的px转换成rem，增加background-size主要是因为px单位下图片背景位置跟大小默认就是雪碧图中的大小，所以转换成rem后需要进行修改。

PS：rem单位下在不同设备中可能出现图片中出现了雪碧图中其他图的边边角角，所以这里需要设置图片合成的时候彼此之间有一定的间隙，这个只要是gulpfile中设置下padding:10即可。

1
2
3
4
5
6
var spriteData = gulp.src(base_url+'_images/icons/*.+(jpeg|jpg|png)').pipe(spritesmith({
    imgName: 'icons_sprite.png',
    cssName: 'icons_sprite.css',
    cssFormat: 'css',
    padding: 10
  }));

css, others, rem, sprite
← Prev Next →