用gulp / nodejs从LESS / CSS文件中抓取hex颜色？

我试图从一个较less的文件中抓取所有的颜色，并将其input到nodejs / gulp中的另一个stream中，输出到一个模板。 基本上采取LESS文件，并生成一个快速的HTML页面的颜色。

• 用于显示节点stream/吞吐方式的奖励点[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); }); 

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

 @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应该给你你想要的结果。

我将会介绍使用数据stream的stream程。

我们将创build一个迷你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)); }); }); 

你的正则expression式似乎没有正常工作，我会确认他们确实得到了结果。

使用stream，你可以使用through2从几个文件中获取内容，连接它们，然后运行正则expression式。 例如： https ： //github.com/plus3network/gulp-less/blob/master/index.js