fis2 添加CSS雪碧合成图片

文章目录

百度fis2 添加雪碧合成功能,前提是要先安装一个插件:node-images

具体命令行为:

$ npm install images

添加配置代码

1.首先要配置FIS中使用csssprites

fis.config.set('modules.spriter', 'csssprites');

2.合并后的css 文件会 自动 进行csssprites

fis.config.set('pack', {
    //对合并的aio.css进行处理
    'aio.css': [
       '**.css'
    ]
});

3.如果有个别css文件没有合并,但是想进行csssprites处理,可以像下面这样配置

fis.config.set('roadmap.path', [{
    reg: /\/static\/.*\.css$/i,
    //配置useSprite表示reg匹配到的css需要进行图片合并
    useSprite: true
}]);

4.如果想配置html中的css片段进行csssprites处理,可以像下面这样配置

fis.config.set('settings.spriter.csssprites', {
    //开启模板内联css处理,默认关闭
    htmlUseSprite: true,
    //默认针对html原生<style></style>标签内的内容处理。
    //用户可以通过配置styleTag来扩展要识别的css片段
    //以下是默认<style></style>标签的匹配正则
    styleReg: /(<style(?:(?=\s)[\s\S]*?["'\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig

    //**styleReg规则**
    //1. 默认不配置styleReg,仅支持html中默认style标签中的css内容
    //2. 配置styleReg时候,仅支持styleReg匹配到的内容。
    //3. styleReg正则必须捕获三个分组,
    //     $1为:开始标签(start tag),
    //     $2为:内容(content) ,
    //     $3为:结束标签(end tag)
});

自定义雪碧图片

默认值:

{
    margin       : 3,
    layout       : 'linear',
    width_limit  : 10240,
    height_limit : 10240
}

选项:

margin:图之间的边距,单位像素。

layout:布局算法,默认是 'linear',图片垂直布局,水平方向无需 遮盖处理 。可选项还有 matrix,图片矩阵布局,面积最小化,但需要提供额外的dom控制水平方向图片的遮盖处理

注意:使用csssprite需要满足以下条件

使用release命令时,添加 -p 或者 --pack 参数。由于csssprite处理需要消耗一定的计算资源,并且开发过程中并不需要时刻做图片合并,因此fis将其定义为打包处理流程,启动csssprite处理需要指定--pack参数。

只有 打包的css文件 或者 roadmap.pathuseSprite 属性标记为 true 的文件才会进行csssprite处理,因此请合理安排要进行csssprite处理的文件,尽量对合并后的文件做处理。

在css中引用图片时,只要加上 ?__sprite 这个query标记就可以使用csssprite了。详情请参考fis-spriter-csssprites插件的 使用文档

用法:

//使用矩阵布局
fis.config.set('settings.spriter.csssprites.layout', 'matrix');

或者

//使用矩阵布局
fis.config.merge({
    settings : {
        spriter : {
            csssprites : {
                layout : 'matrix'
            }
        }
    }
});

至此就可以通过打包生成CSS雪碧图片来压缩,配合图片压缩插件

optimizer.png-compressor

  • 项目:https://github.com/fis-dev/fis-optimizer-png-compressor
  • 解释:png图片压缩器运行配置。fis团队将 pngquantpngcrush 两个优秀的png图片压缩工具移植为nodejs的原生扩展(node-pngcrushnode-pngquant-native),相比同类型工具采用进程调用的方式更高性能,压缩速度更快。
  • 值类型:Object
  • 默认值:无
  • 选项:
    • type:选择压缩器类型,默认是 'pngcrush',可选值为 'pngquant',pngquant会将所有 png24 的图片压缩为 png8,压缩率极高,但alpha通道信息会有损失。
  • 用法:
    //使用pngquant进行压缩,png图片压缩后均为png8
    fis.config.set('settings.optimizer.png-compressor.type', 'pngquant');
    

    或者

    //使用pngquant进行压缩,png图片压缩后均为png8
    fis.config.merge({
        settings : {
            optimizer : {
                'png-compressor' : {
                    type : 'pngquant'
                }
            }
        }
    });

以下是我的一个配置:

fis-sprite

文件都放在dev中,输入到dest中。配置放在dev中。

fis.config.merge({
    project : {
        charset : 'gbk'  //设置项目的编码
    },
    namespace: 'csssprites',
    modules: {
        spriter: 'csssprites'
    },
    roadmap: {
        path: [ {
                reg: '**.png'
                // query: '?t=123124132'
            },
            {
                reg: '**.css',
                // release: '.css' //配置产出路径
                useSprite: true
            },
            {
                reg: '**.html',
                useSprite: true
            }
        ]
    },
    // pack: {
    //     '/aio.css': '**.css'
    // },
    settings: {
        spriter:  [{
                margin: 10,
                //矩阵排列方式 
                // scale: 0.5,
                layout: 'matrix',
                width_limit  : 10240,
                height_limit : 10240

        }],

        optimizer: {
            "png-compressor": {
                type: 'pngquant'
            }
        }
    }
});

原文链接:fis2 添加CSS雪碧合成图片 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/fis2-css-sprite.html)

发表评论

请登录后发表评论:

1 Responses to “fis2 添加CSS雪碧合成图片”

  1. 前端开发博客

    http://fex.baidu.com/fis-site/docs/api/cli.html
    http://fex.baidu.com/fis-site/docs/more/fis-standard.html#资源定位
    http://fex.baidu.com/fis-site/docs/advance/plugin-list.html
    http://fex.baidu.com/fis-site/docs/api/fis-conf.html#roadmap
    http://www.pengweb.net/?p=366
    http://www.yi-jy.com/2015/05/26/fis%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E4%B9%8B%E5%88%9D%E4%BD%93%E9%AA%8C/

    登录回复