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文件中，但未添加内联样式。

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

gulp-uncss中是否有一个选项允许均衡器完成它的工作？

Answer 1

我能够使用gulp-uncss中的ignore参数让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数组中。

在Zurb基金会使用高度均衡器gulp-uncss

1 个答案: