优化你的网站：
当一个网站中的资源(比如：js文件、css文件、图片等)很多时必然影响用户访问速度，这时候你就需要做网站性能优化，你可以选择把资源分开放在不同的服务器上，因为一个资源服务器最多可以同时下载2-3个资源，多个服务器就可以同时下载多个文件，但是这样就给公司带来资金问题。一般大家都会想到对资源文件进行压缩和合并，这个过程可以使用工具，也可以自动构建。今天我讲的就是自动构建压缩css文件，合并图片：
ispriter是一个非常不错的基于node的工具包，支持css合并压缩和图片合并:
特性:
智能提取 background 的 url 和 position 等信息
智能设置被合并图片的宽高
智能判断使用了 background-position（使用px为单位）定位的图片并重新定位
支持已经合并了的精灵图再次合并和定位
支持图片去重
支持限制合并后图片的大小
支持设置合并后的图片间距
支持将所有图片合并为一张, 同时所有 CSS 文件合并为一个文件
支持读取 @import 的样式表进行处理
支持将所有合并了图片的 CSS 统一输出, 减少代码量
支持对输出的 CSS 进行压缩(使用 clean-css)
支持排除不需要合并的图片（在 url 后面添加 #unsprite 或者使用 config 文件来配置）
跳过 background-position 是 right/center/bottom 的图片
跳过显式的设置平铺方式为 repreat 的图片
跳过设置了 background-size 的图片
配置文件：
config.json
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
{
/**
* 工作目录, 可以是相对路径或者绝对路径
*
* @optional
* @default 运行 ispriter 命令时所在的目录
* @example
* "./": 当前运行目录, 默认值
* "../": 当前目录的上一级
* "/data": 根目录下的 data 目录
* "D:\\sprite": D 盘下的 sprite 目录
*/
"workspace"
:
"./"
,
"input"
: {
/**
* 原 cssRoot
* 需要进行精灵图合并的 css 文件路径或文件列表, 单个时使用字符串, 多个时使用数组.
* 路径可使用 ant 风格的路径写法
*
* @required
* @example
* "cssSource": "../css/";
* "cssSource": ["../css/style.css", "../css2/*.css"]
*/
"cssSource"
: [
"./style/*.css"
],
/**
* 排除不想合并的图片, 可使用通配符
* 也可以直接在 css 文件中, 在不想合并的图片 url 后面添加 #unsprite, iSpriter 会排除该图片, 并把 #unsprite 删除
*
* @optional
* @example
*
"ignoreImages"
:
"icons/*"
*
"ignoreImages"
: [
"icons/*"
,
"loading.png"
]
*/
// "ignoreImages": ["*logo.png"],
/**
* 输出的精灵图的格式, 目前只支持输出 png 格式,
* 如果是其他格式, 也是以PNG格式输出, 仅仅把后缀改为所指定后缀
*
* @optional
* @default "png"
*/
"format"
:
"png"
},
"output"
: {
/**
* 原 cssRoot
* 精灵图合并之后, css 文件的输出目录
*
* @optional
* @default "./sprite/css/"
*/
"cssDist"
:
"./css/"
,
/**
* 原 imageRoot
* 生成的精灵图相对于 cssDist 的路径, 最终会变成合并后的的图片路径写在 css 文件中
*
* @optional
* @default "./img/"
* @example
* 如果指定 imageDist 为 "./images/sprite/", 则在输出的 css 中会显示为
* background: url("./images/sprite/sprite_1.png");
*
*/
"imageDist"
:
"./img/"
,
/**
* 原 maxSize
* 单个精灵图的最大大小, 单位 KB,
* 如果合并之后图片的大小超过 maxSingleSize, 则会对图片进行拆分
*
* @optional
* @default 0
* @example
* 如指定 "maxSingleSize": 60, 而生成的精灵图(sprite_all.png)的容量为 80KB,
* 则会把精灵图拆分为 sprite_0.png 和 sprite_1.png 两张
*
*/
"maxSingleSize"
: 0,
/**
* 合成之后, 图片间的空隙, 单位 px
*
* @optional
* @default 0
*/
"margin"
: 3,
/**
* 配置生成的精灵图的前缀
*
* @optional
* @default "sprite_"
*/
"prefix"
:
"sprite_"
,
/**
* 精灵图的输出格式
*
* @optional
* @default "png"
*/
"format"
:
"png"
,
/**
* 配置是否要将所有精灵图合并成为一张, 当有很多 css 文件输入的时候可以使用.
* 为 true 时将所有图片合并为一张, 同时所有 css 文件合并为一个文件.
* 注意: 此时 maxSingleSize 仍然生效, 超过限制时也会进行图片拆分
*
* @optional
* @default false
*/
"combine"
:
false
,
/**
* 配置是否把合并了图片的样式整合成一条规则, 统一设置 background-image, 例如:
* .cls1, .cls2{
* background-image: url(xxx);
* }
*
* @optional
* @default true
*/
"combineCSSRule"
:
true
,
/**
* 配置是否压缩 css 文件, 将使用 clean-css 进行压缩, 其值如下:
* false: 不进行压缩;
* true: 用 clean-css 的默认配置进行压缩;
* Object{"keepBreaks": true, ... }: 用指定的配置进行压缩.
*
* @optional
* @default false
*/
"compress"
:
false
}
}
|
操作步骤：
第一步，安装node，官网：http://nodejs.org/
第二步，安装ispriter包，npm install ispriter -g
第三步，当前目录运行 ispriter -c config.json
这时会多出一个文件，里面有css文件和合并之后的image文件。
详细内容：https://github.com/iazrael/ispriter
扫一扫
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
