HTML/CSS

巧妙使用uncss工具去除页面无用的CSS代码

也想出现在这里?联系我们
创客云

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

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

也想出现在这里?联系我们
创客主机
  1. uncss http://www.webhek.com > styles.css

执行输出的结果就是一个你想要的、剔除了所有无用的 CSS 规则的完整的样式表文件。那 uncss 究竟是如何做到这些的呢?让我来一步步告诉你:

首先 PhantomJS 会加载整个 HTML 页面,然后执行 JavaScript。
接着从 HTML 页面里提取页面中所有的 CSS 样式。
然后用 css-parse 分析并连接所有的样式规则。
用 document.querySelector 过滤出哪些 CSS 选择器是没有用到的。
最后用剩下的 CSS 规则生成输出文件

跟其它 NodeJS 工具一样,它里面提供了很多 JavaScriptAPI,下面是一个使用它的 API 的例子:

  1. var uncss = require('uncss');
  2.  
  3. var files   = ['my', 'array', 'of', 'HTML', 'files'],
  4.     options = {
  5.         ignore       : ['#added_at_runtime', /test\-[0-9]+/],
  6.         media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
  7.         csspath      : '../public/css/',
  8.         raw          : 'h1 { color: green }',
  9.         stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
  10.         ignoreSheets : [/fonts.googleapis/],
  11.         urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
  12.         timeout      : 1000,
  13.         htmlroot     : 'public'
  14.     };
  15.  
  16. uncss(files, options, function (error, output) {
  17.     console.log(output);
  18. });
  19.  
  20. /* Look Ma, no options! */
  21. uncss(files, function (error, output) {
  22.     console.log(output);
  23. });
  24.  
  25. /* Specifying raw HTML */
  26. var raw_html = '...';
  27. uncss(raw_html, options, function (error, output) {
  28.     console.log(output);
  29. });

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

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!