使用uncss去除无用的CSS
从代码的角度讲，你知道什么是比往网站或应用里添加功能更好的事情吗？删除那些没用的东西。也许是一些代码、图片、或相关依赖等，就像扔掉家中储存柜里没用的产生异味的存货。我经常用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
);
});
一个运行维护多年的网站或Web应用必定会产生很多无用的代码，这是毫无例外的。多余的代码不仅给WEB程序员带来维护的负担，也给使用者造成负面效应。请试一下
uncss
，真的非常简单，完全自动的帮你清除无用的CSS代码！