Какую строку мне следует игнорировать в плагине UnCSS, чтобы заставить работать меню Resposive Foundation 6?

Question

Я установил Foundation 6 с помощью NPM, начал новый проект с foundation new команда и начал строить новый сайт. Но когда я строю это на производстве с командой foundation build --production, .top-bar класс всегда рушится даже с большими мониторами (обратите внимание на data-hide-for="medium"). Когда я запускаю его в режиме разработки с foundation watch Команда, она работает просто отлично (разваливается только на средних и маленьких устройствах).

Я подумал, что это может быть проблемой с некоторыми задачами, и решил попробовать одну за другой. Когда я изменил uncss работать только в режиме разработки (изменение isProduction вар в false логическое значение), это работает! Итак, я решил прочитать их документацию и там я нашел параметр "игнорировать". Я могу установить некоторые селекторы в этом, и это мой вопрос. Какой селектор я должен игнорировать, чтобы коллапс работал хорошо? Я думаю, что UnCSS удаляет некоторый селектор, который думает, что файл *.html не использует, но он есть, и я не мог определить, какой это селектор.

Примечание: uncss Задача запускается только в производственном режиме.

index.html

<div class="title-bar" data-responsive-toggle="top-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="top-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li>
                <input type="text" placeholder="Login">
            </li>
            <li>
                <input type="password" placeholder="Password">
            </li>
            <li>
                <button type="button" class="button">Login</button>
            </li>
        </ul>
    </div>
</div>

gulpfile.js (Это шаблон по умолчанию для шаблона Foundation для сайтов, поэтому я добавлю только часть компиляции CSS)

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  var minifycss = $.if(isProduction, $.minifyCss());

  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe(uncss)
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browser.reload({stream: true}));
});

Весь CSS не тронут, я ничего не изменил, даже пути по умолчанию (но я добавил некоторые правила, такие как font-face и некоторые цвета), я просто стер по умолчанию index.html из Foundation 6 и добавил это меню (это на их документах).

Чтобы помочь вам, я загрузил весь проект на MEGA, просто распакуйте его и запустите foundation watchсм .top-bar работает нормально (с меню и формой входа), а затем запускается foundation build --production и запустить index.html от dist папка, чтобы увидеть .top-bar разрушилась.

.top-bar на производстве:

.top-bar по разработке (работе):

Answer 1

У меня была похожая проблема, и она была исправлена ​​с помощью следующей настройки gulp-uncss:

   .pipe(uncss({
      html: ['./*.html'],
      ignore: [new RegExp('^meta\..*'),
        new RegExp('.*\.is-.*'),
        new RegExp('.*\.top-bar.*'),
        new RegExp('.*\.menu.*')]
    }))

Answer 2

Добавлять foundation-mq класс к вашему списку игнорирования. У меня работало только регулярное выражение: /foundation\-mq/,

---

В _global.scss

// These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
.foundation-mq {
  font-family: '#{-zf-bp-serialize($breakpoints)}';
}