3

我使用 NPM 安装了 Foundation 6，使用foundation new命令启动了一个新项目并开始构建一个新网站。但是当我使用 command 在生产环境中构建它时，即使使用大型监视器（注意 ） foundation build --production，.top-bar该类也总是崩溃data-hide-for="medium"。当我使用foundation watch命令在开发模式下运行它时，它工作得很好（仅在中小型设备上折叠）。

我认为可能是gulp的某些任务有问题，我决定一一测试。当我修改uncss为仅在开发模式下运行（将isProductionvar 更改为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 保持不变，我没有修改任何东西，甚至路径都是默认值（但我添加了一些规则，如字体和一些颜色），我只是删除了 Foundation 6 的默认 index.html 并添加了这个菜单（这是他们的文档）。

为了帮助您，我将整个项目上传到MEGA，只需将其解压缩并运行foundation watch，查看.top-bar工作正常（带有菜单和登录表单），然后从文件夹中运行foundation build --production并运行以查看折叠。index.htmldist.top-bar

.top-bar关于生产： 在此处输入图像描述

.top-bar关于发展（工作）： 在此处输入图像描述

4

2 回答 2

1

我遇到了类似的问题，并使用以下 gulp-uncss 设置进行了修复：

   .pipe(uncss({
      html: ['./*.html'],
      ignore: [new RegExp('^meta\..*'),
        new RegExp('.*\.is-.*'),
        new RegExp('.*\.top-bar.*'),
        new RegExp('.*\.menu.*')]
    }))
于 2016-02-26T15:50:48.193 回答
0

将课程添加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)}';
}
于 2016-09-16T15:46:10.573 回答