gulp-uncss 与 Zurb Foundation 中的高度均衡器

Question

我正在尝试使用 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 中是否有允许均衡器完成其工作的选项？

Answer 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 数组中。

gulp-uncss 与 Zurb Foundation 中的高度均衡器

gulp-uncss with height equalizer in Zurb Foundation

zurb-foundation

gulp

gulp-uncss