怎么复制站点中html文件,从现有站点选择性复制HTML + CSS + JS的工具

SnappySnippet

我终于找到了一些时间来创建此工具。您可以从Chrome网上应用店安装SnappySnippet。它允许从指定的(最后检查)的DOM节点轻松提取HTML + CSS。另外，您可以将代码直接发送到CodePen或JSFiddle。请享用！

SnappySnippet Chrome扩展

其它功能

清理HTML(删除不必要的属性，修复缩进)

优化CSS以使其可读

完全可配置(可以关闭所有过滤器)

用作品::before和::after伪元素

出色的UI，要归功于Bootstrap和Flat-UI项目

码

SnappySnippet是开源的，您可以在GitHub上找到代码。

实作

既然我在学习本书的过程中学到了很多东西，所以我决定分享一些我遇到的问题以及他们的解决方案，也许有人会发现它很有趣。

第一次尝试-getMatchedCSSRules()

首先，我尝试检索原始CSS规则(来自网站上的CSS文件)。令人惊讶的是，这非常简单，这要归功于window.getMatchedCSSRules()，但是效果并不理想。问题在于，我们只采用了在整个文档的上下文中匹配的HTML和CSS选择器的一部分，而在HTML片段的上下文中不再匹配。由于解析和修改选择器似乎不是一个好主意，因此我放弃了这一尝试。

第二次尝试-getComputedStyle()

然后，我从@CollectiveCognition建议的内容开始- getComputedStyle()。但是，我真的想分离CSS表单HTML，而不是内联所有样式。

问题1-将CSS与HTML分开

这里的解决方案不是很好，但是很简单。我已经为选定子树中的所有节点分配了ID，并使用该ID创建了适当的CSS规则。

问题2-删除具有默认值的属性

为节点分配ID效果很好，但是我发现我的每条CSS规则都有大约300个属性，使整个CSS难以理解。

事实证明，该方法getComputedStyle()返回为给定元素计算的所有可能的CSS属性和值。其中一些为空，一些具有浏览器默认值。要删除默认值，我必须先从浏览器中获取它们(每个标签具有不同的默认值)。解决方案是将来自网站的元素的样式与插入到空白元素中的相同元素进行比较。这里的逻辑是，在empty中没有样式表，因此我在其中附加的每个元素都只有默认的浏览器样式。这样，我就可以摆脱大多数无关紧要的属性。

问题3-仅保留速记属性

我发现的下一件事情是，不必要地打印了具有速记等效项的属性(例如，先有border: solid black 1px然后border-color: black;是border-width: 1pxitd)。

为了解决这个问题，我只创建了一个具有速记等效项的属性列表，并将其从结果中过滤掉。

问题4-删除前缀属性

在每个规则属性的数量先前的操作后，显著回落，但我发现，我窗台有很多的-webkit-前缀属性，我从来没有听到(-webkit-app-region？-webkit-text-emphasis-position？)。

我想知道我是否应该保留这些特性，因为他们中的一些似乎是有益(-webkit-transform-origin，-webkit-perspective-origin等等)。不过，我还没有弄清楚如何验证这一点，并且由于我知道大多数时候这些属性只是垃圾，所以我决定将它们全部删除。

问题5-合并相同的CSS规则

我发现的下一个问题是，一遍又一遍地重复相同的CSS规则(例如，对于每个

样式完全相同的样式，在CSS输出中创建的规则相同)。

这只是将规则相互比较并将具有完全相同的一组属性和值的规则组合在一起的问题。结果，不是#LI_1{...}, #LI_2{...}我得到了#LI_1, #LI_2 {...}。

问题6-清理和修复HTML缩进

由于对结果感到满意，因此我转向了HTML。它看起来像一团糟，主要是因为该outerHTML属性将其格式设置与从服务器返回的格式完全相同。

唯一需要的HTML代码outerHTML是简单的代码重新格式化。由于它在每个IDE中都可用，因此我确定有一个JavaScript库可以做到这一点。结果证明我是对的(jquery-clean)。而且，我还有一些多余的属性去除(style，data-ng-repeat等等)。

问题7-过滤器破坏CSS

由于在某些情况下上述过滤器可能会破坏代码段中的CSS，因此我将所有过滤器都设为可选。您可以从“ 设置”菜单禁用它们。