前端轮子之uncss去除无用的css

通常一个运行维护多年的产品会产生很多无用的代码,多余的代码不仅给开发员带来维护的负担,也给产品的用户体验造成负面效应,对于网站或Web应用尤其如此,有没有一种便捷高效(偷懒)的方式或者工具帮助我们清除这些无用的代码呢?今天要介绍的主角uncss就能满足一部分需求,它是一款基于NodeJS的应用,可完全自动的帮助我们清除无用的CSS代码,并且使用真的非常简单。

项目地址:https://github.com/uncss/uncss

通过npm安装uncss

npm install -g uncss

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

uncss http://www.yxxme.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', 'or', 'http://urls.com'],
    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/],
        timeout      : 1000,
        htmlroot     : 'public',
        report       : false,
        banner       : false,
        uncssrc      : '.uncssrc',
        userAgent    : 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
        inject       : function(window){ window.document.querySelector('html').classList.add('no-csscalc', 'csscalc'); }
    };

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 rawHtml = '...';

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

如果你不打算使用NodeJS或仅做测试,作者提供了一个在线uncss工具https://uncss-online.com/

也可以工具项目情况配合以下构建工具使用:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据