gulp-minify-css-names producing non-modified files

user_372212 0
Viewed 319

I am looking for long time for a solution that will help me automate renaming/minifying class names in HTML, JS, CSS files altogether across whole project in gulp.

There are mane css + js only solutions. The one that works for all 3 types of source files is gulp-minify-css-names. But after installing it and creating gulp task similar to example on nmp site - i can't get it to work.

It produces non-modified css file(same for html and js).

The code of task 

    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'))
    });

project page - https://www.npmjs.com/package/gulp-minify-css-names

Why it isnt working ?

I have opened source code of gulp-minify-css-names in my node_modules folder and found it extremely small of a size: 78 lines total

npm gulp node.js css html
1 Answers

This lib requires that you prefix/append your css names. In their example, they have the following 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'}

where -pre- is the default prefix and -post- is the default suffix.

Justification:

Why need a prefix/append?
This plugin match by RegExp in all file/stream content. This will reduce the likelihood of wrong replacement.

user_14768850
Related