Minifying Classes with Gulp

JavaScript
1

I am new to Gulp and I am using Bootstrap with Bower on a project. As is normally the case, I have divs with classes like, “col-md-5 col-sm-6 col-md-offset-3 col-sm-offset-3”. Just to make it look cleaner, is there a way to minify these classes when everything is bundled for distribution? Basically, can anyone recommend a task for that? Also, if I want to exclude unused classes in my minified CSS, is there a task for that?

2

By minifying, do you mean reducing all those classes to a single one? This could be done with SCSS like

.my-custom-col {
    @extend .col-md-5;
    @extend .col-sm-6;
    @extend .col-md-offset-3;
    @extend .col-sm-offset-3;
}

although I’m not aware of a gulp task to do this automatically. But then again, who cares how clean the source looks? ^^ Also, it would actually (if marginally) increase the size of your resulting CSS file. Not having to ship unused classes is a good point, though…

Edit: Maybe have a look at gulp-uncss… haven’t tried it myself, though.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.