gulp-selectors travis-ci npm

Catalog all of your selectors and do fun stuff with them.

3 years after

gulp-selectors

Build Status Code Climate Test Coverage NPM Version

Minify those pesky selector names down to nothing with this fancy gulp plugin. Minified selectors will be applied consistently across all files piped into it.

Input Output
.class-name { ... } .a { ... }
.another-class { ... } .b { ... }
#an-id { ... } #a { ... }
<div class="class-name"> ... </div> <div class="a"> ... </div>

You're like: .some-super-descriptive-selector-name {...}, and it's like: .a {...}

Usage

First and foremost: npm install gulp-selectors

var gulp    = require('gulp');
var gs      = require('gulp-selectors');

gulp.src(['src/**/*.css', 'src/**/*.html'])
    .pipe(gs.run())
    .pipe(gulp.dest('dist'));

You can also pass some options into run:

gs.run(processors, ignores)

CSS and HTML files are processed well by default, just pass in your glob of files and all classes and IDs will be reduced to a minified form. Of course you can use it for some more specific functions if you like. See the included sample gulpfile for a full example of how to effectively use gulp-selectors in your gulp workflow.

Defaults

All arguments are optional. If omitted, processors will default to css and html and ignores will be empty:

gs.run({
    'css': ['css'],
    'html': ['html']
  }, {
  });

Advanced Usage

var processors = {
        'css':  ['scss', 'css'],        // run the css processor on .scss and .css files
        'html': ['haml'],               // run the html processor on .haml files
        'js-strings':   ['js']          // run the js-strings plugin on js files
    },
    ignores = {
        classes: ['hidden', 'active']   // ignore these class selectors,
        ids: '*'                        // ignore all IDs
    };

gs.run(processors, ignores);

Two processors are built in for your convenience: css and html are stable but js-strings and remove-unused are beta and may be moved to their own repositories.

  • css: matches .selectors and #selectors
  • html: matches id="selector"s, class="selector"s, and for="selector"s
  • js: matches exact strings by looping through the library, which is dangerous if you use common words as selectors
  • remove-unused: should be run last, and only on stylesheets - it removes all declarations present in the library which haven't been used

If a processor is listed which isn't built in, gulp-selectors will attempt to require it.

How gulp-selectors works

Calling gs.run() builds a library which persists for all processors used in the call. Processors are run on all associated files and all selectors, besides those that have been ignored, will be minified.

Processors

{
    'css': ['css', 'scss'],
    'html': ['html', 'tpl.js'],
    'js-strings': ['js', '!tpl.js'],
    'your-custom-processor': ['.ext']
}

css and html are built in. Additional processors referenced will be injected where needed so it is important to ensure all are installed. Processors are used like this:

processor(file, classLibrary, idLibrary)

File is the string containing the file contents. Each of the two libraries exposes the following API:

  • set(selectorName): returns a minified selector name
  • has(selectorName): tests if the name exists
  • get(selectorName, [dontCount]): ...
libraries

Ignores

{
    ids: ['content', 'target'],
    classes: ['hidden', 'active']
}

Related Repositories

gulp-uncss

gulp-uncss

Remove unused CSS selectors. ...

gulp.spritesmith

gulp.spritesmith

Convert a set of images into a spritesheet and CSS variables via gulp ...

awesome-gulp

awesome-gulp

:tropical_drink: A curated list of awesome gulp resources, plugins, and boilerpl ...

gulp-sass-lint

gulp-sass-lint

Gulp plugin for Sass Lint ...

postcss-custom-selectors

postcss-custom-selectors

PostCSS Custom Selectors ...


Top Contributors

cazzer hashworks Cap32 fat AgtLucas nloewen davidleston

Releases

-   v0.1.9 zip tar
-   0.1.6 zip tar