去除没用的css之uncss的使用

我们网站里面很多功能样式都是后来添加的，样式也都是用的别人的样式，导致很多硬肿的css代码，那么有没有一种办法可以让我们发现这些垃圾代码平且删除呢

这里就用到了nodejs的工具uncss

基本的用法是直接在命令行窗口里输入uncss命令：

uncss http://www.webhek.com > styles.css

执行输出的结果就是一个你想要的、剔除了所有无用的CSS规则的完整的样式表文件。那uncss究竟是如何做到这些的呢？让我来一步步告诉你：

1. 首先PhantomJS会加载整个HTML页面，然后执行JavaScript。
2. 接着从HTML页面里提取页面中所有的CSS样式。
3. 然后用css-parse分析并连接所有的样式规则。
4. 用document.querySelector过滤出哪些CSS选择器是没有用到的。
5. 最后用剩下的CSS规则生成输出文件

跟其它NodeJS工具一样，它里面提供了很多JavaScriptAPI，下面是一个使用它的API的例子：

var uncss = require('uncss');

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = {
        ignore       : ['#added_at_runtime', /test\-[0-9]+/],
        media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
        csspath      : '../public/css/',
        raw          : 'h1 { color: green }',
        stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
        ignoreSheets : [/fonts.googleapis/],
        urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
        timeout      : 1000,
        htmlroot     : 'public'
    };

uncss(files, options, function (error, output) {
    console.log(output);
});

/* Look Ma, no options! */
uncss(files, function (error, output) {
    console.log(output);
});

/* Specifying raw HTML */
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
    console.log(output);
});