npm install node-ccss* cario
* node-canvas
使用前请先确保安装cario
* 暂仅支持png和jpg的css sprite操作
* 暂仅支持英文、数字、合法字符组合的图片文件名（即不支持中文命名）
npm install node-ccss
var ccss = require('node-ccss');
// 方式一：文件加载型
ccss.ccss("./ccss.json");
// 方式二：参数加载型
ccss.ccss({
"srcImgDir" : "./ccss",
// 其他参数...
});
文件目录
ccss/
h-bg/
h-bg-01.png
h-bg-02.png
h-bg-03.png
h-bg-04.png
h-box/
h-box-left.png
h-box-mid.png
h-box-right.png
h-elements/
h-elements-01.png
h-elements-02.png
h-elements-03.png
h-elements-04.png
v-bg/
v-bg-01.png
v-bg-02.png
v-bg-03.png
v-bg-04.png
v-box/
v-box-bot.png
v-box-mid.png
v-box-top.png
v-elements/
v-elements-01.png
v-elements-02.png
v-elements-03.png
v-elements-04.png
index.js
node_modules/
node-ccss/
...
...
ccss.json
{
"srcImgDir" : "./ccss",
"tarImgDir" : "./images",
"tarCssDir" : "./css",
"tarCssFileName": "ccss",
"tarCssFileType": "css",
"filesOptions" : {
"v-elements" : {
"type" : "v-elements",
"cssComment" : "垂直排列元素型",
"imgType" : "png",
"backgroundImageURL": "../images"
},
"h-elements" : {
"type" : "h-elements",
"cssComment" : "水平排列元素型",
"imgType" : "png",
"backgroundImageURL": "../images"
},
"v-box" : {
"type" : "v-box",
"cssComment" : "垂直包裹的盒子型",
"imgType" : "png",
"backgroundImageURL": "../images"
},
"h-box" : {
"type" : "h-box",
"cssComment" : "水平包裹的盒子型",
"imgType" : "png",
"backgroundImageURL": "../images"
},
"v-bg" : {
"type" : "v-bg",
"cssComment" : "垂直延伸背景型",
"imgType" : "png",
"backgroundImageURL": "../images"
},
"h-bg" : {
"type" : "h-bg",
"cssComment" : "水平延伸背景型",
"imgType" : "png",
"backgroundImageURL": "../images"
}
}
}
index.js 代码如上
* 对于要进行v-box（下方有说明）操作的图片文件，中部、头部、底部图片文件名结尾必须要对应为mid/middle、top、bot/bottom，这直接影响成生成效果（生成css时，bot/bottom的取值影响background-position中的bottom；生成图片时，ottom，这直接影响成生成效果（生成css时，bot/bottom的取值会使元素贴底）
* 对于要进行h-box（下方有说明）操作的图片文件，中部、左部、右部图片文件结尾必须要对应为mid/middle、left、right，这直接影响生成效果
* 图片文件排列顺序按文件名排列顺序进行
* srcImgDir
> 源图片文件目录
* tarImgDir
> 存放处理后的图片文件的目标目录
* tarCssDir
> 存放处理后的样式文件的目录
* tarCssFileName
> 生成的样式文件件名
* tarCssFileType
> 生成的样式文件的文件类型，取值为css、less，默认为s
* filesOptions
> 各待处理的文件参数
* filesOptions.filename
> 对应要处理的文件名（不指定时则按默作）
* filesOptions.filename.type
> 按哪种形式进行文件操作，取值为v-elements、h-elements、v-box、h-box、v-bg、h-bg，默认为v-elemes
* filesOptions.filename.cssComment
> css注释，默认为文件名释
* filesOptions.filename.imgType
> 生成的图片类型，取值为png、jpg，默认为g
* filesOptions.filename.backgroundImageURL
> css中background-image的目录，默认为../images
* watch
> 开启观测者模式，取值为true、false，默认为false；取值为true时，如待处理文件夹中的文件（srcImgDir + filesOptions.filename）出现增删改操作，会重新生成css和图片合成操作
*
* v-elements
> 垂直排列元素型，适合图标、独立图片
* h-elements
> 水平排列元素型，适合图标、独立图片
* v-box
> 垂直包裹的盒子型，适合多层元素包裹，（一般2到3层）每层元素负责对应的背景，组合成一个可垂直延伸的整体元素，如固定宽度的圆角弹出框
* h-box
> 水平包裹的盒子型，适合多层元素包裹，（一般2到3层）每层元素负责对应的背景，组合成一个可垂直延伸的整体元素，如固定高度的圆角按钮
* v-bg
> 垂直延伸背，* 固定宽度，背景上下延伸
* h-bg`
> 垂直延伸背景型，固定高度，背景左右延伸