javascript - gulp-uncss 删除使用 javascript 添加的类

Question

我对 gulp-uncss 的 gulp 配置是

gulp.task('uncssme', function () {

return gulp.src('src/css/**/*.css')
    .pipe(uncss({
        html: ['src/**/*.html']
    }))
    .pipe(gulp.dest('dist/css'))
});

使用 uncss 会从最终的 css 文件中删除“newClass”选择器，因为该类未直接在 .html 文件中使用，而是通过 js 动态添加。

document.getElementById('good').className += ' newClass';

编辑：我已经在使用 /* uncss:ignore */ 来使其工作，但是每次为 .js 中存在的类而不是 .html 中的类添加此注释是没有意义的

Answer 1

也许，您可以仅在 js widh 中为每个类添加前缀，is-并在 gulp 任务中使用正则表达式添加忽略选项。

gulp.task('uncssme', function () {

return gulp.src('src/css/**/*.css')
    .pipe(uncss({
        html: ['src/**/*.html'],
        ignore: [^\.is-.*]
    }))
    .pipe(gulp.dest('dist/css'))
});

Answer 2

我在使用 Uncss 时遇到了同样的问题，唯一的方法是使用忽略注释，这不是我认为很好的解决方案。

我建议您尝试 purifycss 插件（https://www.npmjs.com/package/gulp-purifycss/）。您可以设置 html 和 js 文件，然后 css 是 uncss-ed 或 purify-ed，这就是我遇到问题时所寻找的。