可能是最好用的雪碧图工具了,好吧,至少是我用过最好用的。

首先安装css-sprite,安装这里很坑,等我最后再说。

npm install css-sprite

我是使用gulp来构建前端代码,所以还需要安装gulpgulp-if,安装好之后就可以开始配置啦。
新建一个task:

var gulp = require('gulp');
var gulpif = require('gulp-if');

gulp.task('sprites',function(){
    gulp.src('img/icon/*.png')                  //这是要合并的图片的路径
        .pipe(sprite({
            name: 'icon',                       //定义一个名称
            style: '_icon.scss',                //这是生成的样式文件
            format: 'png',                      //png格式的图片
            orientation: 'left-right',          //雪碧图合并的方向,也可以设置成垂直或水平
            cssPath: '#{$icon-sprite-path}',    //雪碧图的路径变量
            template: './sprite-tpl.mustache',  //scss生成的模板
            processor: 'scss'                   //生成的样式文件的格式
        }))
        .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));
});

scss的模板使用mustache

{{#items}}
    ${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}

@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}

@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}

@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
@include sprite-position($sprite);

@include sprite-width($sprite);
@include sprite-height($sprite);

}

{{#sprite}}
    {{class}} {
    background-repeat: no-repeat;
    overflow: hidden;
    border: none;
    background: url('{{{escaped_image}}}?v=#{$version}');
    @include inline-block();
    vertical-align: middle;
    font-style: normal;
    color:$icon-font-color;
    }
{{/sprite}}

{{#items}}
    .{{name}}{
    @include sprite(${{name}});
    }
{{/items}}

搞定!就是那么简单。

现在只需要把图片丢到icon文件夹里面,运行下gulp sprites,就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了,也可以再新建一个监听的任务,监听icon文件夹,这样就可以实时生成了。

我把_icon.scss贴出来:

$icon-qq: -262px -161px 60px 60px;
$icon-email: -332px -161px 60px 60px;
$icon-skype: -5px -252px 60px 60px;
$icon-phone: -75px -252px 60px 60px;
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}

@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}

@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
@include sprite-position($sprite);

@include sprite-width($sprite);
@include sprite-height($sprite);

}
.icon {
    background-repeat: no-repeat;
    overflow: hidden;
    border: none;
    background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');
    @include inline-block();
    vertical-align: middle;
    font-style: normal;
    color:$icon-font-color;
}
.icon-qq{
    @include sprite($icon-qq);
}
.icon-email{
    @include sprite($icon-email);
}
.icon-skype{
    @include sprite($icon-skype);
}
.icon-phone{
    @include sprite($icon-phone);
}

使用的时候只需要加上类似class="icon icon-qq",就可以了。

css-sprite的地址
现在作者已经没有更新css-sprite了,现在叫sprity,配置差不多,sprity多了一些功能,有时间再介绍。

现在说下开头说的那个坑,就是安装的问题,微软的环境很难安装成功,因为依赖lwip,需要node-gyp重新编译,我自己的电脑安装好了,但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试,估计应该没什么问题,windows的环境比较操蛋。

如果你们也遇到安装的问题,能够解决的话,麻烦告知下啦。:)

17 条评论
HereChen · 2015年06月19日

css预处理加雪碧图自动生成,很棒的方案

回复

RayLiao 作者 · 2015年06月19日

恩,不过我现在安装还遇到问题,如果有兴趣你也可以试下安装,看是否会出现我说的问题。:)

回复

HereChen · 2015年06月19日

你是说 node-gyp 重编译的时候出现 configure error 的情况么?

回复

RayLiao 作者 · 2015年06月19日

对啊

回复

HereChen · 2015年06月19日

查了一下,似乎是编译器的问题。我这里因为安装的 python 3.4.3 ,gyp 不支持。我尝试改一下编译器

回复

RayLiao 作者 · 2015年06月19日

python 3.x应该不行,python 2.7才可以

回复

HereChen · 2015年06月19日

Windows 上看起来挺麻烦的,python、visual studio、windows sdk 都要保证OK。

回复

RayLiao 作者 · 2015年06月19日

是啊,部署环境很累~

回复

jiandan · 2016年02月26日

lwip@0.0.6 install /Users/jiandan/whitetea/node_modules/css-sprite/node_modules/lwip
node-gyp rebuild

xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.

xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:355:16)
gyp ERR! stack at emitTwo (events.js:87:13)
gyp ERR! stack at ChildProcess.emit (events.js:172:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/jiandan/whitetea/node_modules/css-sprite/node_modules/lwip
gyp ERR! node -v v4.3.1
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "css-sprite"
npm ERR! node v4.3.1
npm ERR! npm v2.14.12
npm ERR! code ELIFECYCLE

npm ERR! lwip@0.0.6 install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the lwip@0.0.6 install script 'node-gyp rebuild'.
npm ERR! This is most likely a problem with the lwip package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get their info via:
npm ERR! npm owner ls lwip
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/jiandan/whitetea/npm-debug.log

在mac中安装时遇到这些问题

回复

RayLiao 作者 · 2016年02月26日

mac环境安装竟然也会。。。用sprity不要用css-sprite

回复

RayLiao 作者 · 2016年02月26日

你看下https://segmentfault.com/a/1190000003915988 这篇文章吧,用sprity可以解决。

回复

jiandan · 2016年02月26日

sprity和css-sprite 有什么区别吗?我是在mac gulp 中运行下面命令 npm install css-sprite

回复

RayLiao 作者 · 2016年02月26日

css-sprite是旧版本,作者不再更新,sprity是新版本。

回复

jiandan · 2016年02月26日

试了 npm install sprity 也报错了
Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "sprity"
npm ERR! node v4.3.1
npm ERR! npm v2.14.12
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! syscall read

npm ERR! network read ETIMEDOUT
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

回复

jiandan · 2016年02月26日

刚才sprity出错是网络超时了;重试了一次可以了;谢谢;

回复

kittyapp · 2017年06月20日

推荐使用-雪碧图制作专家V1.0来制作雪碧图 软件下载地址:http://www.kittyapp.net/soft/...
网页雪碧图制作专家是一款辅助网页开发、快速合成雪碧图的实用型工具软件。
网页雪碧图制作专家的界面非常简洁、操作方便、功能强大。
可减轻广大Web程序员或网站网页设计爱好者制作雪碧图时的苦恼、愉快地享用CSS雪碧图网页开发技术。

回复

justforuse · 2017年07月20日

css-sprite安装确实巨坑,搞了环境也不行,还是用这个吧,https://www.w3ctrain.com/2015...

回复

载入中...
Planets
RayLiao RayLiao

2.7k 声望

发布于专栏

以梦为码

以梦为码

13 人关注