- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图从一个 less 文件中获取所有颜色,以将其馈送到 nodejs/gulp 中的另一个流中,以输出到模板。基本上采用 LESS 文件,并生成颜色的快速 HTML 页面。
这是我的代码:
//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/
我需要您在以下方面提供帮助。近一个月来,我一直在阅读有关任务和异步的内容。 我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法,并且它们都按预期工作: public Htt
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。 在这个例子中... define([], function () { "use
影响我性能的前三项操作是: 获取滚动条 获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格,其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时,它运
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
我最近一直在使用 sysctl 来做很多事情,现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意,当我尝试获取其他变量 HW_MACHINE 时,此代码可以完美运行。我还认为
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 9 年前。 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分,我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我使用 Gridlayout 在一行中放置 4 个元素。首先,我有一个 JPanel,一切正常。对于行数变大并且我必须能够向下滚动的情况,我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
由于以下原因,我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
我知道有很多关于此的问题,例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
如何获取文件中的最后一个字符,如果是某个字符,则删除它而不将整个文件加载到内存中? 这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
我是这个社区的新手,想出了我的第一个问题。 我正在使用 JSP,我成功地创建了 JSP-Sites,它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
我有一个函数,我们将其命名为 X1,它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y?执行.on后X1的结果? 最佳答案 您可以更改 Y 的范围以使其位于函
我是一名优秀的程序员,十分优秀!