Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
css auto sprite tool by nodejs
JavaScript CSS PHP
Failed to load latest commit information.
bin feat(graph): graph api auto select support
examples fix(slice): fix bug #33, esc param support
lib chore(travis): add jre install, remove mock.js
test test: add common/util test
.gitignore 完成测试用例
.jshintrc finish merge image into one
.travis.yml chore: change travise.yml
History.md fix(locating): fix problem when layout auto count background right align
Makefile
README.md change readme.md
index.js 增加node 0.10支持
package.json test: support coveralls

README.md

joycss

Build Status Coverage Status

NPM

joycss是一个基于nodejs的自动拼图工具, 目标:使用简单,功能强大

图片处理

图片处理部分,现在有两种方案可以使用

  1. php, 需要命令行有php命令,并且php需要开启gd库扩展(默认是开启的)
  2. java 需要有jre就可以了,java图片处理比php要慢不少,默认使用的是php

没有采用node c++扩展的方式,主要考虑到跨平台编译c++扩展,尤其是windows,太麻烦了。

安装

npm install -g joycss
//update
npm update joycss -g

如果依赖有问题,查看安装指南

使用

$ joycss a.css
$ joycss a.less
$ joycss a.less -o out

命令行参数

参数 全称 含义
-c --close 紧凑拼图
-x --horizontal 水平布局
-a --alpha 只生成png24图片(默认情况同时png8和png24)
-o --output 输出文件夹, 默认是build
--api 调用拼图api,支持php和java,默认使用php(java图片处理要慢3倍的样子)
--debug 输出debug信息

上面参数中,-o,--output,用于存放输出的文件,包括图片和css,生成文件命名规则 是如下:

$ joycss base.css -o out

out
|-- base-sprite.png
|-- base-sprite8.png
`-- base.css

拼图方式

支持3种拼图方式,上面命令行参数中配置的-x, -h两个配置,用于选择拼图算法,默认 情况是垂直布局,close表示紧凑拼图,-x表示水平布局拼图。

在默认算法中,如果可以通过当前样式活动选择器的高宽,会自动使用紧凑算法。

API使用

var Joycss = require('joycss');
var options = {
  destCss: __dirname + '/build/base.css'
};

new Joycss(__dirname + '/base.css', options)
  .run(function(err, result){
    if (err) {
      throw new Error(err);
    }

    // result is the result of cssText
    console.log('build success');
  });

// or
var joycss = new Joycss(__dirname + '/base.css', options);
var cssText = yield joycss.run();
console.log('build success');

var destImg = joycss.options.destImg;

options 配置

{
  /**
   * 图片目标地址,如果没有指定,默认图片和生成的css地址一致
   */
  destImg: null,
  /**
   * 生成css地址,如果不指定,和源css路径一致
   */
  destCss: null,
  /**
   * cssText,css字符串,当存在cssText,不需要从文件中读取css字符串,第一参数
   * filename用于查找css中图片路径,比如css中图片../size.png,filename是/a/b/
   * 那么图片的绝对路径就是/a/size.png
   */
  cssText: null,
  /**
   * 使用png8模式,如果设置为false,生成png24图
   */
  force8bit : true,
  /**
   * 拼图算法,支持三种'auto | close | vertical | horizontal'
   * auto自动拼图,如果知道图片所在的盒子大小,使用紧凑拼图,否则独占一行
   * close: 紧凑拼图,搜有图片使用紧凑拼图
   * vertical: 垂直布局,
   * horizontal: 水平布局
   */
  layout : 'auto',

  // 是否保存css文件到destCss, 用在gulp这样的工具时可以用上
  save: true,

  // 图片命令行工具,支持php或者java,如果没有尝试执行php和java,自动选择
  api: 'auto'
}

Questions

提问有几种方式

  1. 新建issue
  2. 邮件到eward.song at gmail.com
  3. 阿里内部员工,可以通过hanwen.sah搜到我的旺旺
Something went wrong with that request. Please try again.