【即将关站通知●已关闭注册功能】,倒计时剩余:计算中...

使用uncss去除无用的CSS


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

一个运行维护多年的网站或Web应用必定会产生很多无用的代码,这是毫无例外的。多余的代码不仅给WEB程序员带来维护的负担,也给使用者造成负面效应。请试一下uncss,真的非常简单,完全自动的帮你清除无用的CSS代码!

收藏 邀请

路过

雷人

握手

鲜花

鸡蛋


最新评论

在线支持
关闭
欢迎来到魔趣吧
如果你有建站技术问题、仿站需求、模板插件修改需求,请联系我们的技术支持!高效率,低价格的帮你搞定!
请认准魔趣吧唯一官网:www.moqu8.com,谨防假冒网站!

一般问题请到【求助区】发帖咨询(免费)!

邮箱咨询:
winkill2012@qq.com

邮箱咨询需注明:资源地址+本站用户名+具体问题,三者缺一不做处理。非本站资源不处理!
在线支持

关于魔趣吧|魔趣建站

魔趣吧,志在打造全国最大的建站资源共享平台。 本站提供海量免费的建站资源,包括WordPress模板、Discuz精仿模板、PHPWind模板、phpcms模板、Discuz精仿插件、帝国cms模板、织梦模板等上万精品模板!同时,提供各种建站素材、JS特效、整站程序源码!
服务中文站长,传播分享精神!建站,就来魔趣吧!!
2015-2024 魔趣吧 ( 豫ICP备2021024354号 )   豫公网安备41030402000182号 百度统计
HTTPS安全认证
|网站地图 | 已运行:天 
温馨提示:本站所有资源、教程、源码,不得用于非法站点及用途,否则,本站将终止提供任何服务! Powered by Discuz! Licensed