使用 uncss 找出未使用的 CSS 样式

在我们的博客中, 记录了我们在开发过程中所使用的技术和遇到的问题, 希望作为其他开发和设计者的一个学习交流平台.

使用 uncss 找出未使用的 CSS 样式


我们知道, 保持代码的经凑干净对于代码的可阅读性至关重要, 之前的博文中也讲过这点. 但在修改CSS时, 我们经常会因为大量的CSS代码和CSS自身的可覆盖性而只增加不删减. 本篇中我们就介绍一下uncss, 一个可以用于找出未使用的CSS代码的工具, 方便我们精简代码.

uncss最基本的用法是命令行:

    uncss http://example.com > styles.css

输出的结果就是在使用的CSS代码, 而未使用的CSS代码已经被自动删除掉.

uncss是如何工作的呢?

  • HTML文件通过PhantomJS载入, 相关JavaScript代码被运行
  • 在使用的CSS代码从HTML文件中抽离
  • CSS代码通过css-parse重新组合起来
  • document.querySelector将HTML中未找到的selector分离出去
  • 剩余的CSS代码重新加入组合

就像每个NodeJS工具一样, 我们能使用其JavaScript 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);
    });

原文链接: http://weiguda.com/blog/61/