gulp-less-branding-js
Gulp plugin to convert variables defined in .less files into javascript variables for use in client-side charting libraries or anything that is hard to actually style in css.
Installation
npm install gulp-less-branding-js
Usage
var gulp = ;var glbj = ; gulp; gulp;
Example
Convert your _branding.less file...
@brand-dark: #333333; @gray-darkest: @brand-dark;@gray-dark: lighten@gray-darkest, 10%;@gray: lighten@gray-darkest, 40%;@gray-light: lighten@gray-darkest, 55%;@gray-lightest: lighten@gray-darkest, 70%; @brand-white: #FFF; @brand-primary: purple;@brand-primary-lightened: mix@brand-primary, @gray-lightest, 30%;
...to a _branding.js file.
var brandingResource = "brandDark": "#333333" "grayDarkest": "#333333" "grayDark": "#4d4d4d" "gray": "#999999" "grayLight": "#bfbfbf" "grayLightest": "#e5e5e5" "brandWhite": "#ffffff" "brandPrimary": "purple" "brandPrimaryLightened": "#c7a1c7";
Then just pipe the output into your minification/bundling workflow to be used as a global branding dictionary.
TODO
- An option to just output a .json file to be required into something that you're using (not sure the use case for this, but it sounds alright)
License
MIT
===
Special thanks to the guys and girls over at plus3network for giving me something to work from. https://github.com/plus3network/gulp-less