.js ) as well as HTML files, your CSS files, and gives you a report of CSS coverage.
.i.e how many class names are needless and which are those class names.
In this way, you can tremendously accelerate the rendering time of your app by reducing network latency, loading and parsing time, as the CSS file is smaller with less properties to process and etc.
npm install gulp-css-usage --save-dev
include the plug-in
// ECMAScript 5 code, using require()var gulp = ;var gulpCssUsage = default;
// ECMAScript 6 code, using module import;;
using the plug-in
// selectors that matched complete strings in js files needless selectors: .myClass #myId // selectors that partialy matched an ES6 template string in js files probably needless selectors: .myClassTemplate #myIdTemplate
The file path/pattern to the CSS file which this plug-in will test.
Supports multiple files either via glob pattern or via array of paths/patterns.
Number, (between 0-100)
gulp-css-usage will check the amount of unused selectors, and if the amount of it is above the threshold then it fails the task.
['jsx', 'flow', 'classProperties']
Array containing the plugins that you want to enable.
Since we're using
babel 6.4+ and
babylon to parse and extract the class names from the
you might need to add which plug-ins to enable to parse your code if you're using more
Example: if you're using
objectRestSpread capability which is not in
ECMAScript2015 standards - you'll need to add it
For more available plug-ins, go to babel-babylon
A Path to a report file. If set,
gulp-css-usage will write it's analysis both to console and to the file specified with a
Having some trouble? Have an issue?
For bugs and issues, please use the Issues page.
For trouble in usage or unclear stuff, please use the awesome StackOverflow and tag your question with
gulp-css-usage, as well as other tags as you see fit
- support of more CSS selectors
- support of precompiled SCSS files as well
Sure! just fork this repository and join in!