Jump to:

Gulp

gulp-symdiff

Installation

First install the plugin itself:

npm install gulp-symdiff

Then install all the plugins you need.

Usage

var symdiff = require('gulp-symdiff'),
    html = require('symdiff-html'),
    css = require('symdiff-css');

gulp
    .src(['src/*.css', 'src/*.html'])  // ALL the files
    .pipe(symdiff({
        templates: [html],  // list all templates plugins
        css: [css],          // list all css plugins
        ignore: [/^ignore/]  // classes to ignore
    })
    .on('error', function() {
        process.exit(1);    // break the build
    }));

Example

Look here.

Grunt

grunt-symdiff

Installation

First install the plugin itself:

npm install grunt-symdiff

Then install all the plugins you need.

Usage

var symdiffCSS = require('symdiff-css'),
    symdiffHTML = require('symdiff-html');

grunt.initConfig({
    symdiff: {
        foo: {
            src: 'test/fixtures/bad.*' // however you specify source files in Grunt
        },
        options: {
            css: [symdiffCSS],  // all css plugins
            templates: [symdiffHTML],   // all template plugins
            ignore: [/regex/, 'string'] // classes to ignore
        }
    }
});
grunt.loadNpmTasks('grunt-symdiff');

Example

Look here.

Where the fuck is…

  • Broccoli? Planned long term, if you’re impatient please consider writing a plugin.
  • Webpack? Planned, but I didn’t check whether it’s actually possible and the right thing to do with webpack. Also: Hints and tips on how to test a webpack loader are greatly appreciated.

FAQ

Q: How does symdiff decide whether it should run a file through the HTML plugin or the CSS plugin to extract the classes?

A: It doesn’t. Every file is piped through every plugin. Since a plugin should never throw an error (e.g. when you pass HTML to the CSS plugin), this will work.

Q: But won’t this lead to false positives, e.g. when using .whatever somewhere in the HTML?

A: Potentially it could, yes, but I suspect in reality it won’t because plugins should not use RegExps but parsers.