我有一个网站,其样式表变得越来越多,并且在某些页面上有 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 option用pattern强制 uncss “提供一个不应被 UnCSS 删除的选择器列表”。虽然不会进行测试。
2/将检测分辨率(视口(viewport)宽度)并通过删除/添加它或在容器上添加类来调整内容以适应它的脚本。我猜他们将在桌面分辨率的 PhantomJS 中执行,因此不会完成他们的工作,所以你需要修改对 PhantomJS 或类似东西的调用......或者深入研究 3 个元素的选项或 GitHub 问题(我没有' t)
我听说过的其他工具,没有测试过或几乎没有测试过或无法测试,对 MQ 部分一无所知:
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/