gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 22:01:11 26 4
gpt4 key购买 nike

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

  • 向我展示 Node 流/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

最佳答案

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

我将回顾使用数据流的流程。

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

还有 gulpfilegulpfile.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

关于javascript - 使用 gulp/nodejs 从 LESS/CSS 文件中获取十六进制颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23685283/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com