gulp-minify-cssnames

Gulp plugin for minify css classes and css ids

Since version 2.0 supported only Node.js 4+ If you need support Node 0.12 or older, then install version 1.0.2

Usage

Minifying all names(class, id) with some postfix (default: '--s--') or prefix (default not use).

Example

We have css file:

.menu--s-- {color: red;}
.menu_top--s-- {color: black;}
.menu__item--s-- {color: green;}
.menu__item_active--s-- {color: blue;}
.menu__item_active--s--::before {content: 'active'}

var gulp = require('gulp');
var gulpMinifyCssNames = require('gulp-minify-cssnames');

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

Result

.a0 {color: red;}
.a1 {color: black;}
.a2 {color: green;}
.a3 {color: blue;}
.a3::before {content: 'active'}

Example2

Our project has 3 files:

style.css

.menu--s-- {color: red;}
.menu_top--s-- {color: black;}
.menu__item--s-- {color: green;}
.menu__item_active--s-- {color: blue;}
.menu__item_active--s--::before {content: 'active'}

index.html

<div class="menu--s--" id="main-menu--s--">
    <div class="menu__item--s--">1</div>
    <div class="menu__item--s--">2</div>
    <div class="menu__item--s-- .menu__item_active--s--">3</div>
</div>

app.js

var $menuItems =  document.querySelectorAll('.menu__item--s--');
var $mainMenu = document.querySelector('#main-menu--s--');

Gulp task

var gulp = require('gulp');
var gulpMinifyCssNames = require('gulp-minify-cssnames');

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

Result

style.css

.a0 {color: red;}
.a1 {color: black;}
.a2 {color: green;}
.a3 {color: blue;}
.a3::before {content: 'active'}

index.html

<div class="a0" id="a4">
    <div class="a2">1</div>
    <div class="a2">2</div>
    <div class="a2 a3">3</div>
</div>

app.js

var $menuItems = document.querySelectorAll('.a2');
var $mainMenu = document.querySelector('#a4');

API

gulp-minify-cssnames([options])

options

Type: Object

options.postfix

Type: String
Default: "--s--"

options.prefix

Type: String
Default: ""

Alternative postfix for css names.
Important: postfix should be valid for css class and id

Why need a postfix or prefix?

This plugin match by RegExp in all file/stream content. This will reduce the likelihood of wrong replacement.