gulp-minify-css-names 生成未修改的文件

Question

我正在寻找一种解决方案，该解决方案将帮助我在 gulp 中的整个项目中自动重命名/缩小HTML、JS、CSS文件中的类名。

有鬃毛 css + js 唯一的解决方案。 适用于所有 3 种类型源文件的一种是 gulp-minify-css-names。 但是在安装它并创建类似于 nmp 站点上的示例的 gulp 任务后 - 我无法让它工作。

它生成未修改的 css 文件（与 html 和 js 相同）。

任务代码

    var gulp = require('gulp');
    var gulpMinifyCssNames = require('gulp-minify-css-names');

    gulp.task('minify-css-names', function() {
        return gulp.src(['src/*.css'])
            .pipe(gulpMinifyCssNames())
            .pipe(gulp.dest('build'))
    });

项目页面 - https://www.npmjs.com/package/gulp-minify-css-names

为什么它不起作用？

我在 node_modules 文件夹中打开了 gulp-minify-css-names 的源代码，发现它的大小非常小：总共 78 行

Answer 1

此库要求您在 css 名称前加上前缀/附加。 在他们的示例中，他们有以下 css：

.-pre-menu-post- {color: red;}
.-pre-menu_top-post- {color: black;}
.-pre-menu_item-post- {color: green;}
.-pre-menu_item_active-post- {color: blue;}
.-pre-menu_item_active-post-::before {content: 'active'}

其中-pre-是默认前缀， -post-是默认后缀。

理由：

为什么需要前缀/附加？
该插件通过 RegExp 在所有文件/流内容中匹配。 这将减少错误更换的可能性。