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

Question

我一直在寻找一个解决方案来帮助我在 中自动重命名/缩小类名HTML、JS、CSS gulp 中整个元素的文件。

有鬃毛 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-是默认后缀。
Justification :

Why need a prefix/append?
This plugin match by RegExp in allfile/stream content. This will reduce the likelihood of wrongreplacement.