Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Find unused css selector from your style-sheet files, Support for dynamic scripting.
JavaScript CSS
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
examples
lib
tools
LICENSE.BSD
README.md
package.json
phantomrun.js
third-party.txt

README.md

doverjs

Find unused css selectors from your style-sheet files to the specified HTML URI

Why doverjs ?

DoverJS --- Simple, Convenient, Effective; Base on Nodejs; Could find unused selector from DHTML
Support Pseudo-classes, DOM Inserted
简单、易用、有效,基于NodeJS,提供命令行工具与nodejs模块
支持由JS改变DOM导致的选择器变换、支持伪类选择器的匹配

Installation

Using npm:

 npm install -g doverjs

Use case

style.css
body {}
.btn {}
.unknow {}
#main div {}
.other a {}
index.html
<html>
<head></head>
<body>
<div class="btn"></div>
<div id="main">
    <div></div>
</div>
</body>
</html>

How to find the unused selectors .unknow .other a for index.html from style.css ?
对于index.htmlstyle.css 中的 .unknow .other a 的样式没被用到,怎样自动检查出来呢?

Let's try doverjs (试试doverjs):

Use in command line (在命令终端使用)

doverjs -s style.css -d index.html -c

Use in nodejs app (在nodejs代码中使用)

case : find the unused selectors

var dover = require('doverjs');
dover.cover({style:'style.css', html:'index.html'}, function (resp) {
    //resp.....
});

case : find and remove the unused selectors 或者把没用的删除了

dover.remove({style:'style.css', html:'index.html'}, function (resp) {
    //resp.....
});

Helping :

  Usage: doverjs [options] <file ...>

  Options:

    -h, --help                 output usage information             (使用说明)
    -V, --version              output the version number            (版本信息)
    -c, --console              print process result in console      (在命令行窗口输出处理结果)
    -d, --destination <files>  destination file <file, file, ...>   (指定要检查的HTML文件,可以是远程文件)
    -j, --json <file>          using json config file               (使用JSON文件配置来批量处理)
    -o, --output <file>        Output result                        (输出结果到指定文件)
    -S, --statistics           print statistics in console          (输出统计信息)
    -s, --style <files>        covering style-sheet file <file, file, ...>(指定要检查无用规则的样式文件,可以是远程文件)

Usage :

  • Usage one :
    doverjs -s xxx.css -d http://slider.jitsu.com -o out
  • Usage two :
    doverjs -j package.js
  • Console process result :
    doverjs -j package.js -c
    process result
  • Console statistics result :
    doverjs -j package.js -S
    process result

Multiple Cover use configuration files (批量覆盖的配置文件 ):

//e.g example/package.js
{
    style : 'xxx.css', /* multiple style-sheet file: style : ["xxx.css",'aaa.css'] */
    html : [
        /*Add www to the URL , avoid URL Not Found(被检查的网址,远程文件请加上"http://"否则识别为本地文件); 
        "http://baidu.com"无法解读时,请加上www("http://www.baidu.com")*/
        //@One
        "http://github.com/switer/imper",
        //@One
        "http://github.com/switer/DoverJS",
        //@Multiple
        {
            //Mutiple html url
            //可以用于url + hash的形式 prefix + suffix
            "prefix" : "http://localhost:3000/", //网址前缀
            "suffix" : ["index.html","#","path/file.js"] //网址后缀
            /**yield:
            *       http://localhost:3000/index.html,
            *       http://localhost:3000/#,
            *       http://localhost:3000/path/file.js,
            **/
        }
    ]
}

API Reference

假如你在npm中安装了doverjs,你可以在nodejs的应用中这样使用:

var dover = require('doverjs');

检查不被使用的样式示例:

    dover.cover(
            /**
            *  params
            *  style与html的值可以为数组,如{style:['xxx.css'], html:['x1.com','x2.com']}
            **/
            //远程链接资源地址必须以http或https开头 //必要参数
            {
                //要检查的样式文件
                style:'xxx.css',  //必要参数
                //检查的目标页面uri //必要参数
                html:'http://www.baidu.com'
            }, 
            //success callback //必要参数
            function (resp) {
                /*
                resp是一个数组,格式如下:
                resp = [
                            {
                                uri : String, //资源地址-来自参数的style 属性
                                results : { 
                                    "unused"    : Arrray<String>,//unused selectors 样式文件中不被使用的选择器
                                    "used"      : Arrray<String>,//used selectors 已使用的选择器
                                    "errors"    : Arrray<String>//error match selectors 匹配错误的选择器
                                },
                                outputs : { //outputs
                                    "stdout"        : String, //命令终端输出的样式文件解析结果,带颜色格式
                                    "log"           : String, //命令终端输出的统计结构,带颜色格式
                                    "statistics"    : String//输出的结果(stdout + statistics),无颜色格式
                                }
                            },
                            {
                                //Others ...
                            }
                        ]
                */
            },
            //error callback //可选参数
            function (err) {

            }
    );

删除不被使用的样式示例:

    dover.remove(
            {
                //要检查的样式文件uri
                style:'xxx.css',  //必要参数
                //检查的目标页面uri //必要参数
                html:'http://www.baidu.com'
            }, 
            //success callback //必要参数
            function (resp) {
                /*
                resp是一个数组,格式如下:
                resp = [
                            {
                                uri : String, //资源地址-来自参数的style 属性
                                results : { 
                                    "unused"    : Arrray<String>,//unused selectors 样式文件中不被使用的选择器
                                    "used"      : Arrray<String>,//used selectors 已使用的选择器
                                    "errors"    : Arrray<String>//error match selectors 匹配错误的选择器
                                },
                                content : String //删除不被使用的CSS样式后的文件内容
                            },
                            {
                                //Others ...
                            }
                        ]
                */
            },
            //error callback //可选参数
            function (err) {}
    );

Subsequent Optimized Point

  • 大样式文件导致的报错(Compeleted @0.1.1)
  • 支持HTTPS 资源(Compeleted @0.1.1)
  • windows下,带空格文件路径导致无法运行(Compeleted @0.1.2)
  • 优化package配置文件的解析,配置文件可以使用单引号与注释(Compeleted @0.1.4)
  • 支持Linux,Mac(Compeleted @0.1.4)
  • 命令窗口的输出内容可选项化(Compeleted @0.1.4)
  • @media选择器提取与忽略@keyframes选择器(Compeleted @2.0.0)
  • 支持API Reference(Compeleted @2.0.0)
  • 增加remove API(Compeleted @2.0.0)
  • 批量处理配置文件的语法解析优化
  • 自动删除功能
  • 复合样式文件导致的执行时间长优化

Support

如果图片看不见,怎么办??囧。github的raw被墙了 <guankaishe@gmail.com>

Something went wrong with that request. Please try again.