css - 我怎样才能只提取给定网页上使用过的 CSS,并将其合并到一个单独的样式表中?

标签 css

我有一个网站,其样式表变得越来越多,并且在某些页面上有 50% 到 90% 左右没有使用。我不想拥有 23 个单独的阻塞 CSS 工作表,而是想找出我想要定位的页面上正在使用哪些工作表,并将它们导出到一个工作表中。

我看到几个问题推荐“Dust me selectors”或类似的附加内容,它会告诉你哪些选择器被使用,哪些没有被使用;但这不是我想要的。我需要能够将该特定页面的所有工作表中使用的所有样式导出到一个新工作表中,该新工作表可用于替换其他 23 个工作表。该解决方案应该能够支持响应式网站(媒体调用)。我定位的网站页面是:http://tripinary.com .

我发现:https://unused-css.com但这是一项付费服务​​,我需要免费;

我遇到的下一个最接近的是 http://www.csstrashman.com/但这不看样式表。事实上,它完全忽略了它们,最终我在网站的响应能力方面遇到了麻烦。很多时候,这个网站都崩溃了。

如果有人以前不得不这样做并且可以推荐一个方向,我不介意程序化解决方案。

最佳答案

(删除了我对 RwwL 答案的评论,使其成为一个彻底的答案)

UnCSS,无论是 node.js 还是作为 grunt 或 gulp 任务,都能够列出媒体查询数组中页面数组使用的 CSS 规则。

uncss:https://github.com/giakki/uncss
grunt-uncss:https://github.com/addyosmani/grunt-uncss
gulp-uncss:https://github.com/ben-eb/gulp-uncss

多页:

您可以将 files 作为参数传递给 3 个插件中的任何一个,例如:

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = { /* (…) */ };

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

避免:

urls (Array):
array of URLs to load with Phantom (on top of the files already passed if any).
NOTE: this feature is deprecated, you can pass URLs directly as arguments.


媒体查询和响应被考虑在内:

media (Array):
By default UnCSS processes only stylesheets with media query "all", "screen", and those without one. Specify here which others to include.

您可以添加样式表,忽略其中一些,添加内联 CSS 和许多其他选项,如 htmlroot


遗留问题:

1/条件类 如果您将它们用于 IE9-。它们显然不会在 WebKit PhantomJS 环境中匹配!

HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->

CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */

它们应该手动添加还是脚本添加到测试环境中的 html 元素? (如何渲染并不重要)
uncss里面有选项吗?
只要您不使用 :not(.ie9)(奇怪)样式,就可以了。

编辑:您可以使用 ignore optionpattern强制 uncss “提供一个不应被 UnCSS 删除的选择器列表”。虽然不会进行测试。

2/将检测分辨率(视口(viewport)宽度)并通过删除/添加它或在容器上添加类来调整内容以适应它的脚本。我猜他们将在桌面分辨率的 PhantomJS 中执行,因此不会完成他们的工作,所以你需要修改对 PhantomJS 或类似东西的调用......或者深入研究 3 个元素的选项或 GitHub 问题(我没有' t)

我听说过的其他工具,没有测试过或几乎没有测试过或无法测试,对 MQ 部分一无所知:

  • 在 grunt-uncss 自述文件中,Coverage 部分
  • Opera 的 ucss(这里已经有一个答案,无法让它工作)
  • Helium
  • CSSESS
  • mincss

Addy Osmani 在 100 多张幻灯片中进行了无数次演示,展示了像这样的很棒的工具:https://speakerdeck.com/addyosmani/automating-front-end-workflow (你会更后悔,日子只有 24 小时,而不是 48 err wait 72 ^^)

关于css - 我怎样才能只提取给定网页上使用过的 CSS,并将其合并到一个单独的样式表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24665885/

相关文章:

css - 无法在 jquery 中引用 css 类动态添加的 html 表行

CSS - 是否可以根据设备分辨率上传不同的图像?

javascript - 我的容器 Div 超出了 Particle.js 背景

html - 悬停不使用 Font Awesome 图标

html - 下拉列表中的模式不起作用

css - 更改光标类型 - Material UI 扩展面板

javascript - 绝对定位的子元素在父容器的动画过程中被剪裁

javascript - 难道不能在 Rails 中使用 jQuery 更改 CSS 属性吗?

css - 如何在分页中的移动 View 中显示更少的页面?

javascript - 下拉菜单将内容向下推