gulp-minify-css-names 生成非修改文件答案

【问题标题】：gulp-minify-css-names producing non-modified filesgulp-minify-css-names 生成非修改文件
【发布时间】：2019-11-10 13:52:19
【问题描述】：

我一直在寻找一种解决方案，可以帮助我在 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 行

【问题讨论】：

那个项目是从这个项目派生出来的：github.com/Connormiha/gulp-minify-cssnames - 另外，你在你的类名中使用了前缀还是后缀？替换器仅适用于前缀或后缀名称。默认为“--s--”。

标签： html css node.js npm gulp

【解决方案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:

为什么需要前缀/附加？
此插件全部由 RegExp 匹配文件/流内容。这将减少出错的可能性替换。

【讨论】：