ispriter自动构建css-sprite

简介: ispriter自动构建css-sprite

特性:



   

智能提取 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
{
    /**
     * 工作目录, 可以是相对路径或者绝对路径
     *
     * @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

相关文章
|
6月前
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
150 0
|
6月前
animate.css源码
animate.css源码
62 0
|
4月前
|
编解码 缓存 前端开发
什么是CSS Sprite
【7月更文挑战第14天】 **CSS Sprite** 是一种图像合并技术,通过将多个图标整合到一张大图并利用CSS背景定位显示所需部分,减少HTTP请求,提升页面加载速度和降低服务器压力。优点包括减少请求次数、降低服务器负担、加快速度和简化图片管理,但制作与维护成本高且定位复杂。使用工具可降低工作难度,适应不同分辨率设备。需权衡利弊适时应用。
47 1
|
6月前
|
前端开发
什么是CSS Sprite,以及如何在页面或网站中使用它
什么是CSS Sprite,以及如何在页面或网站中使用它
85 1
|
11月前
|
前端开发
什么叫做css sprites呢?
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。
51 0
|
Web App开发 前端开发 JavaScript
|
11月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
前端开发
CSS Sprite 优点
CSS Sprite 优点自制脑图
78 0
CSS Sprite 优点
|
前端开发
CSS——CSS精灵技术(sprite)※
CSS——CSS精灵技术(sprite)※
243 0
CSS——CSS精灵技术(sprite)※
|
前端开发
CSS 轻松制作 SVG 动画
如果从未在前端使用过 SVG,那么就错过了很多改善性体验,如果不知道如何使用 SVG 制作动画,那么将错过更多。本文开始制作第一个 SVG 图形,为其添加动画。
713 0
CSS 轻松制作 SVG 动画