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`
> 垂直延伸背景型,固定高度,背景左右延伸