使用 gulp/nodejs 从 LESS/CSS 文件中获取十六进制颜色？

Question

我正在尝试从一个 less 文件中获取所有颜色，以将其馈送到 nodejs/gulp 中的另一个流中，以输出到模板。基本上采用 LESS 文件，并生成一个快速的颜色 HTML 页面。

• 向我展示节点流/gulp 方式的奖励积分[tm]。 :)
• 向我展示如何一次提取多个文件进行处理的奖励积分

这是我的代码：

//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);

});

这是我的输入（读入的文件）：

@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;

这是我的结果：

[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

下面的 gulpfile 应该会给你想要的结果。

我将介绍使用数据流的流程。

我们将创建一个迷你 gulp 插件。 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
};

还有 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));
    });
});

您的正则表达式似乎无法正常工作，我会确认他们确实得到了结果。

使用流，您可以使用through2 从多个文件中获取内容，连接它们，然后运行正则表达式。 示例：https://github.com/plus3network/gulp-less/blob/master/index.js