npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

atm3-spriter-csssprites

v0.3.11

Published

基于fis的csssprite,支持repeat-x,repeat-x,background-position

Downloads

10

Readme

fis-spriter-csssprites

NPM version

基于FIS的csssprites,对css文件,以及html文件css片段进行csssprites处理。支持repeat-x, repeat-y, background-positionbackground-size

使用

FIS 内置

环境要求

  1. 依赖native插件,images 环境需要符合这个插件的要求。(OS X、Windows、Linux x86 提供了二进制包)
  2. 只能在FIS中使用

配置

  • 首先要配置FIS中使用csssprites

    fis.config.set('modules.spriter', 'csssprites');
  • 合并后的css 文件会 自动 进行csssprites

    fis.config.set('pack', {
        //对合并的aio.css进行处理
        'aio.css': [
           '**.css'
        ]
    });
  • 如果有个别css文件没有合并,但是想进行csssprites处理,可以像下面这样配置

    fis.config.set('roadmap.path', [{
        reg: /\/static\/.*\.css$/i,
        //配置useSprite表示reg匹配到的css需要进行图片合并
        useSprite: true
    }]);
  • 如果想配置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)
    });
  • background-size

    background-size 只支持图片同倍率缩小或者放大;scale < 1缩小, scale > 1放大;其配置如下,当设置scale时,不需要给每一个规则都写上background-size,csssprites会根据scale产出正确的结果。

    注意: 当写像素时,必须两个大小同时写才能识别。如background-size:10px 15px

    • 支持情况
      • 不支持跟background-repeat一起用。
      • 设置了scale,则规则不允许写background-size
    fis.config.set('settings.spriter.csssprites', {
        scale: 0.5
    })
  • csssprites其他设置

    fis.config.set('settings.spriter.csssprites', {
        //图之间的边距
        margin: 10,
        //使用矩阵排列方式,默认为线性`linear`
        layout: 'matrix'
    });

以上设置可以按照需求任意组合

使用

调用执行spriter,需要fis release时加-p参数: fis release -p,具体请参照文档

在书写css时标注background-image的图片是否进行合并,标注说明;

background

通过图片添加query识别图片是否需要做图片合并,具体

支持图片的background-position:有的情况下引用的图片已经是合并了几个小图的图片,通过background-position来显示每个小图,这种情况也是支持的。

支持以下几种background-position,有的同学不知道background-position是如何工作的,请参见MDN

|支持写法|示例|使用场景| |:------|:----|:--------| |background-position: \d+px \d+px;|background-position: -9px -1px;|需要合并的图是一个合并了很多小图的图片| |background-position: left \d+px;|background-position: left -11px;|需要合并的图片向左浮动| |background-position: right \d+px;|background-position: right -1px;|需要合并的图片向右浮动| |background-position: left top;|background-position: left top;|需要合并的图片向左浮动| |background-position: right top;|background-position: right top;|需要合并的图片向右浮动

###示例

源代码: aio.css

.header, .footer {
    background: url(/img/1px_bg.png?__sprite) repeat-x;
    height: 150px;
    width: 960px;
}

.nav {
    min-height: 400px;
    width: 100px;
    background: url(/img/nav_bg.png?__sprite) repeat-y;
}

.icon_add {
    width: 25px;
    height: 25px;
    background: url(/img/icon/add.jpg?__sprite) no-repeat;
}

.icon_mul {
    width: 25px;
    height: 25px;
    background: url(/img/icon/mul.jpg?__sprite) no-repeat;
}

产出结果:

.header, .footer {
    height: 150px;
    width: 960px;
    background-repeat: repeat-x
}

.nav {
    min-height: 400px;
    width: 100px;
    background-repeat: repeat-y
}

.icon_add {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat
}

.icon_mul {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat
}

.header, .footer {
    background-position: 0px 0px;
}

.nav {
    background-position: 0px 0px;
}

.icon_add {
    background-position: 0px 0px;
}

.icon_mul {
    background-position: 0px -25px;
}

.header, .footer {
    background-image: url('aio_x.png');
}

.nav {
    background-image: url('aio_y.png');
}

.icon_add, .icon_mul {
    background-image: url('aio_z.png');
}

如上,1px_bg.png会合并到aio_x.png(aio.css对应图片), nav_bg.png合并到aio_y.png, add.jpgmul.jpg被合并到aio_z.png

其他