我应该在 UnCSS 插件上忽略什么字符串才能使 Foundation 6 的响应式菜单正常工作?
What string should I ignore on UnCSS plugin to make the responsive menu of Foundation 6 works?
我用 NPM 安装了 Foundation 6,用 foundation new
命令开始了一个新项目,并开始构建一个新网站。但是当我在生产环境中使用命令 foundation build --production
构建它时,.top-bar
class 总是折叠起来,即使是在大型显示器上(注意 data-hide-for="medium"
)。当我使用 foundation watch
命令在开发模式下 运行 它时,它工作正常(仅在中小型设备上折叠)。
我觉得可能是gulp的一些任务有问题,决定一一测试。当我仅在开发模式下将 uncss
修改为 运行 时(将 isProduction
var 更改为 false
布尔值),它起作用了!所以,我决定阅读他们的文档,在那里我找到了 "ignore" 设置。我可以在其中设置一些选择器,这是我的问题。我必须忽略哪个选择器才能使折叠效果良好?我认为 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 的 55=] 并添加了这个菜单(在他们的文档中)。
为了帮助你,我 uploaded the whole project 在 MEGA 上,只需提取它并 运行 foundation watch
,看到 .top-bar
工作正常(菜单和登录表单),然后 运行 foundation build --production
和 运行 dist
文件夹中的 index.html
以查看 .top-bar
折叠。
.top-bar
生产:
.top-bar
关于开发(工作):
我有一个类似的问题并通过以下 gulp-uncss 设置修复:
.pipe(uncss({
html: ['./*.html'],
ignore: [new RegExp('^meta\..*'),
new RegExp('.*\.is-.*'),
new RegExp('.*\.top-bar.*'),
new RegExp('.*\.menu.*')]
}))
将 foundation-mq
class 添加到您的忽略列表。只有正则表达式对我有用:/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)}';
}
我用 NPM 安装了 Foundation 6,用 foundation new
命令开始了一个新项目,并开始构建一个新网站。但是当我在生产环境中使用命令 foundation build --production
构建它时,.top-bar
class 总是折叠起来,即使是在大型显示器上(注意 data-hide-for="medium"
)。当我使用 foundation watch
命令在开发模式下 运行 它时,它工作正常(仅在中小型设备上折叠)。
我觉得可能是gulp的一些任务有问题,决定一一测试。当我仅在开发模式下将 uncss
修改为 运行 时(将 isProduction
var 更改为 false
布尔值),它起作用了!所以,我决定阅读他们的文档,在那里我找到了 "ignore" 设置。我可以在其中设置一些选择器,这是我的问题。我必须忽略哪个选择器才能使折叠效果良好?我认为 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 的 55=] 并添加了这个菜单(在他们的文档中)。
为了帮助你,我 uploaded the whole project 在 MEGA 上,只需提取它并 运行 foundation watch
,看到 .top-bar
工作正常(菜单和登录表单),然后 运行 foundation build --production
和 运行 dist
文件夹中的 index.html
以查看 .top-bar
折叠。
.top-bar
生产:
.top-bar
关于开发(工作):
我有一个类似的问题并通过以下 gulp-uncss 设置修复:
.pipe(uncss({
html: ['./*.html'],
ignore: [new RegExp('^meta\..*'),
new RegExp('.*\.is-.*'),
new RegExp('.*\.top-bar.*'),
new RegExp('.*\.menu.*')]
}))
将 foundation-mq
class 添加到您的忽略列表。只有正则表达式对我有用:/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)}';
}