phamann / grunt-css-metrics Goto Github PK
View Code? Open in Web Editor NEWGrunt task to analyse css files and log simple metrics.
License: MIT License
Grunt task to analyse css files and log simple metrics.
License: MIT License
Comments end up in the rule count. This is because css-parse puts comments in the rules array, and css-metrics just passes the array length as the rule count value.
See line 30 of css-metrics.js
rules: function() {
return this.parsedData.rules.length;
},
Should be an easy fix with a little array jiggering.
I made a wee test project to validate this:
https://github.com/tehfoo/css-metrics-testing
I'll pull request a fix for this when I get a spare few minutes, unless someone beats me to it.
As per this blog's review of some always interesting IE bugs, it seems IE chokes on a maximum number of selectors, and not rules: http://blogs.telerik.com/aspnet-ajax/posts/10-05-03/internet-explorer-css-limits.aspx
should be a dependency of the grunt plugin, that way other people can use or wrap the metrics module without all the grunt baggage.
I'm using https://www.npmjs.org/package/jit-grunt which allows on-demand loading with a single instruction at the beginning of gruntfile,js (require('jit-grunt')(grunt))
However grunt cssmetrics doesn't work by default:
jit-grunt: Plugin for the "cssmetrics" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings
Warning: Task "cssmetrics" not found. Use --force to continue.
Just to rule out that there's something wrong with my setup, other tasks (concat, uglify, jshint et. al.) work, and cssmetrics works if I load it the traditional way with grunt.loadNpmTasks('grunt-css-metrics')
This can be easily resolved with the jit-grunt loader (see following link), but I thought I'd mention it.
https://github.com/shootaroo/jit-grunt#static-mappings
Here's a test case: http://codepen.io/anon/pen/GEcmx
The CSS file contains 4100 rules, and 4101 selectors. 100 of those rules are nested inside two media queries.
grunt-css-metrics gives the following result:
>> Total rules: 4003
>> Total selectors: 4001
>> Average selectors per rule: 1
>> File size: 136.76 KB
>> GZip size: 9.75 KB
Looks like grunt-css-metrics evaluates the media query as a rule, but not the contents of the media query.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.