广州web培训
达内广州五羊中心

18087159764

热门课程

使用uncss去除无用的CSS

  • 时间:2016-08-30
  • 发布:广州前端开发培训
  • 来源:helloweb

从代码的角度讲,你知道什么是比往网站或应用里添加功能更好的事情吗?

删除那些没用的东西。也许是一些代码、图片、或相关依赖等,就像扔掉家中储存柜里没用的产生异味的存货。我经常用ImageOptim来优化我的图片的体积,这既能提供页面加载速度,又能减少带宽流量。

然而,你知道有什么工具能找到页面中样式文件里无用的CSS吗?之前我介绍过一个用JavaScript找到无用CSS的方法,但事实上,我们并不想知道哪些CSS规则是无用的,我们想要的是一个没有多余CSS的干净的样式文件。

所以,这个叫做uncss的NodeJS工具就是我们要找的了。下面我们来看看uncss是如何使用的!

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

执行输出的结果就是一个你想要的、剔除了所有无用的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代码!

上一篇:十大令人振奋的移动端APP设计趋势
下一篇:JS中的prototype

Web职场: CSS滤镜法面试经验

度过艰难,你会让你走得更远

苹果新品之iPhone X/iPhone 8/AppleTV4K

音乐势头:阿里VS腾讯【广州web前端培训】

选择城市和中心
贵州省

广西省

海南省