3

Foundation 6 を NPM でインストールし、foundation newコマンドで新しいプロジェクトを開始し、新しい Web サイトの構築を開始しました。しかし、コマンドを使用して本番環境でビルドするとfoundation build --production、.top-bar大きなモニターでもクラスが常に折りたたまれます ( に注意してくださいdata-hide-for="medium")。コマンドを使用して開発モードで実行すると、foundation watch問題なく動作します（中型および小型デバイスでのみ折りたたみます）。

gulp のいくつかのタスクに問題があるのではないかと考え、1 つずつテストすることにしました。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 for sites complete templateのデフォルトなので、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-barfoundation build --productionindex.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 に答える