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 中使用 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 时遇到了同样的问题，唯一的方法是使用忽略 cmets，我认为这不是很好的解决方案。

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