| layout | title | permalink |
|---|---|---|
page |
Integration |
/integration/ |
Jump to:
First install the plugin itself:
npm install gulp-symdiff
Then install all the plugins you need.
{% highlight javascript %} 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 })); {% endhighlight %}
Look here.
First install the plugin itself:
npm install grunt-symdiff
Then install all the plugins you need.
{% highlight javascript %} 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'); {% endhighlight %}
Look here.
- 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.
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.