Grab hex colors out of a LESS/CSS file with gulp/nodejs?

Question

I'm trying to grab all the colors from a less, file to be fed into another stream in nodejs/gulp, to output to a template. Basically taking LESS files, and generating a quick HTML page of the colors.

• Bonus points for showing me the node stream/gulp way[tm]. :)
• Bonus points for showing me how to pull in multiple files at once to process

Here's my code:

//Grab the shared colors
gulp.task('getsharedcolors', function () {

    gutil.log('Getting shared styles from: ' + path.join(paths.source.assets_root + paths.source.assets_shared_styles + paths.source.assets_shared_colors));
    fs.readFile(path.join(paths.source.assets_root + paths.source.assets_shared_styles + paths.source.assets_shared_colors), function(err, data) {
        if(err) {
            return gutil.log(err);
        }

        reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
        reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
        reHex = /^#?([0-9a-f]{6}|[0-9a-f]{3})$/i;

        lines = data.toString().split('\n');
        for (var line in lines) {
            var _line = lines[line];
            gutil.log(_line);
            var matches = reRGBa.exec(_line) || reHSLa.exec(_line) || reHex.exec(_line);

            while(matches != null && matches != undefined && matches != ''){
                gutil.log(matches[0]);
            }
        }
    });

    // Here's where the node streaming magic via gulp happens, show me the way!
    return gulp.src()
        .pipe()
        .on('error', gutil.log);

});

Here's my input (the file that's read in):

@import "../variables.less";

/*  ==========================================================================
    ############# SHARED VARIABLES
========================================================================== */

@gridColumns:             10;
@gridColumnWidth:         83px;
@gridGutterWidth:         10px;

@black:                   #000000;
@white:                   #FFFFFF;

@grey-darker:             #141414;
@grey-dark:               #2C2D2D;
@grey:                    #4A4A4A;
@grey-medium:             #777878;
@grey-light:              #939393;
@grey-lightest:           #A3A3A3;
@grey-light-background:   #E9EAEA;
@grey-lighter-background: #F6F6F6;
@grey-light-border:       #F2F3F3;

@blue:                    #1C9DBF;

@red-buttons:             #DA4B3E;
@red-buttons-dark:        #C04237;
@red-dark:                #BF4136;
@red-link:                #DA4B3E;

@yellow:                  #BF4136;

@bodyBackground:          #1a1b1b;

@option-focus: #3B3D3D;

Here's my result:

[gulp] @import "../variables.less";
[gulp]
[gulp] /*  ====================================================
======================
[gulp]  ############# SHARED VARIABLES
[gulp] ========================================================
================== */
[gulp]
[gulp] @gridColumns:             10;
[gulp] @gridColumnWidth:         83px;
[gulp] @gridGutterWidth:         10px;
[gulp]
[gulp] // StyleGuideSynacor130509.pdf  - page 4
[gulp] @black:                                    #000000;
[gulp] @white:                   #FFFFFF;
[gulp]
[gulp] @grey-darker:             #141414;
[gulp] @grey-dark:               #2C2D2D;
[gulp] @grey:                    #4A4A4A;
[gulp] @grey-medium:             #777878;
[gulp] @grey-light:              #939393;
[gulp] @grey-lightest:           #A3A3A3;
[gulp] @grey-light-background:   #E9EAEA;
[gulp] @grey-lighter-background: #F6F6F6;
[gulp] @grey-light-border:       #F2F3F3;
[gulp]
[gulp] @blue:                    #1C9DBF;
[gulp]
[gulp] @red-buttons:             #DA4B3E;
[gulp] @red-buttons-dark:        #C04237;
[gulp] @red-dark:                #BF4136;
[gulp] @red-link:                #DA4B3E;
[gulp]
[gulp] @yellow:                  #BF4136;
[gulp]
[gulp] @bodyBackground:          #1a1b1b;
[gulp]
[gulp] @browse-episodes-viewing-option-focus: #3B3D3D;
[gulp]
[gulp] Finished 'getsharedcolors' after 48 ms

Answer 1

The following gulpfile should give you the results you want.

I will go over the process flow for using streams of data.

We will create a mini gulp-plugin. colors.js

var map = require('map-stream');  // require the map-stream module
var gutil = require('gulp-util');

module.exports = function() { // we are actually creating a embedded gulp plugin
  var buildColors = function(file, cb) {
    // file is the gulp vinyl
    // file.contents is the contents

    reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
    reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
    reHex = /^#?([0-9a-f]{6}|[0-9a-f]{3})$/i;
    var hexColors;
    var lines = file.contents.toString("utf8").split('\n');  // convert file.contents from a Buffer to a string
    for (var line in lines) {
      var _line = lines[line];
      gutil.log(_line);
      var matches = reRGBa.exec(_line) || reHSLa.exec(_line) || reHex.exec(_line);

      while(matches != null && matches != undefined && matches != ''){
        gutil.log(matches[0]);
      }


      if (line == lines.length){
        // the loop has finished, return the file
        file.contents = new Buffer(hexColors); // make the new file.contents the contents of the color hexes.
        cb(null, file); // return the error (null) and the file.

      }
    }
  };
  return map(buildColors); // finally return the map stream of the colors
};

And the gulpfile gulpfile.js

var gulp = require('gulp');
var colors = require('./colors');



gulp.task('default', function () {

  // Here's where the node streaming magic via gulp happens, show me the way!
  gulp.src('./css/main.less')
    .pipe(colors())
    .on('data', function(data){
      console.log(String(data));
    });
});

Your regex does not seem to be working correctly, I would confirm that they indeed get the results.

Using streams, you would use through2 to get the contents from several files, concat them, and then run the regex. Example: https://github.com/plus3network/gulp-less/blob/master/index.js