使用uncss去除无用的CSS-建站技术-魔趣建站-我们共同的建站资源共享平台！

使用uncss去除无用的CSS [复制链接]

moqu8 2018-4-16

从代码的角度讲，你知道什么是比往网站或应用里添加功能更好的事情吗？删除那些没用的东西。也许是一些代码、图片、或相关依赖等，就像扔掉家中储存柜里没用的产生异味的存货。我经常用ImageOptim来优化我的图片的体积，这既能提供页面加载速度，又能减少带宽流量。然而，你知道有什么工具能找到页面中样式文件里无用的CSS吗？之前我介绍过一个用JavaScript找到无用CSS的方法，但事实上，我们并不想知道哪些CSS规则是无用的，我们想要的是一个没有多余CSS的干净的样式文件。所以，这个叫做uncss的NodeJS工具就是我们要找的了。下面我们来看看uncss是如何使用的！

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

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

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

首先PhantomJS会加载整个HTML页面，然后执行JavaScript。
接着从HTML页面里提取页面中所有的CSS样式。
然后用css-parse分析并连接所有的样式规则。
用document.querySelector过滤出哪些CSS选择器是没有用到的。
最后用剩下的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);

});