Zurb Foundation 中带有高度均衡器的 gulp-uncss答案

【问题标题】：gulp-uncss with height equalizer in Zurb FoundationZurb Foundation 中带有高度均衡器的 gulp-uncss
【发布时间】：2015-04-11 18:47:19
【问题描述】：

我正在尝试使用 gulp-uncss 从 Zurb Foundation 网站中删除不需要的 CSS。

在站点内，我使用 Foundation 的 Equalizer 使两列具有相同的高度。这可以通过向元素添加 data- 属性来实现：

<div data-equalizer>
  <div data-equalizer-watch>
  <div>
  <div data-equalizer-watch>
  <div>
<div>

当页面加载时，Foundation 会确定两个元素的高度，并注入一个内联样式来将元素的高度设置为两个元素高度中较大的一个。结果是：

<div data-equalizer>
  <div data-equalizer-watch style="height: 256px;">
  <div>
  <div data-equalizer-watch style="height: 256px;">
  <div>
<div>

当我将 gulp-uncss 添加到我的 gulpfile.js 时，均衡器不再起作用。 data- 属性仍然存在于 HTML 文件中，但未添加内联样式。

我尝试使用gulp-uncss 中的ignore 选项来忽略height，但没有成功。内联样式不再添加到 HTML 文档中。

gulp-uncss 中有一个选项可以让均衡器完成它的工作吗？

【问题讨论】：

标签： zurb-foundation gulp gulp-uncss

【解决方案1】：

我能够使用UnCSS 中的ignore 参数使gulp-uncss 正常工作。

添加：

ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]

到uncss() 保留所有必要的CSS。其中最重要的是/^meta.foundation，因为它允许 Foundation JS 注入样式。其余的值 /f-topbar-fixed、contain-to-grid、/sticky/ 和 /fixed/ 都特定于我正在使用的 Foundation JS 模块。以上适用于.sticky 顶栏。

如果您正在使用其他 JS 模块，您需要确定正在注入哪些类并将它们添加到 ignore 数组中。

【讨论】：