手摸手从零到一开发一个灵活的Todolist便签项目

一、背景

前段时间在公司项目中推进全局换肤之后，发现有个后遗症。项目中存在大量硬编码的颜色值，导致部分场景无法达到动态换肤的效果，需要把这些颜色值全部找出来并替换成变量。再加上公司正在风风火火的实行UI规范大一统，对这个问题有迫切的解决需求。然而公司中现存项目数量众多，在上万个文件中找出所有硬编码的颜色值，无异于大海捞针。且在各业务线紧张的迭代中，还要花费大量的人力去查找替换这些色值明显是不太现实的

二、目标

通过工具化的方式，一键将项目中硬编码的颜色值全部替换成相应的变量（less 变量或者 css3 变量），前提条件是公司必须有一套标准的配色表

三、实现方案

1、配色表转换

首先，需要将 UI 设计师提供的配色表转成对应的变量（本篇文章以 less 为例，其他预处理器同理）。例如设计师提供的配色表，如下

色号	色值
1号蓝\color{#e6f7ff}{1号蓝}1号蓝	#e6f7ff
2号蓝\color{#bae7ff}{2号蓝}2号蓝	#bae7ff
3号蓝\color{#91d5ff}{3号蓝}3号蓝	#91d5ff
4号蓝\color{#69c0ff}{4号蓝}4号蓝	#69c0ff
5号蓝\color{#40a9ff}{5号蓝}5号蓝	#40a9ff
6号蓝\color{#1890ff}{6号蓝}6号蓝	#1890ff
7号蓝\color{#096dd9}{7号蓝}7号蓝	#096dd9
8号蓝\color{#0050b3}{8号蓝}8号蓝	#0050b3
9号蓝\color{#003a8c}{9号蓝}9号蓝	#003a8c
10号蓝\color{#002766}{10号蓝}10号蓝	#002766

转换成 less 变量之后，形式如下，姑且把这个文件命名为：color-table.less

@blue-1: #e6f7ff; 
@blue-2: #bae7ff; 
@blue-3: #91d5ff; 
@blue-4: #69c0ff; 
@blue-5: #40a9ff; 
@blue-6: #1890ff; 
@blue-7: #096dd9; 
@blue-8: #0050b3; 
@blue-9: #003a8c; 
@blue-10: #002766; 

2、找颜色

前面准备工作做好之后，接下来就是怎么把颜色找出来了。嗯？那么多文件怎么找？很容易想到，可以通过 fs.readdir、fs.readFile 配合正则表达式进行查找匹配，进而可以得出以下表达式（可精确匹配 rgba 与 hex 格式的颜色值，暂不考虑英文字面量颜色与hsl格式，无他，项目中基本不用）

/(#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3}))|([rR][gG][Bb][Aa]?[\(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[\)]{1})/g 

这么长一串看着晕吗？我也是这种感觉！那咱们把它可视化一下，最后长这样：

666࿰