最近一次机缘巧合接触到了一个通过命令行来分析 CSS 的工具：wallace-cli。当时在 npm 站点中找相关一些分析 CSS 的工具，找了几个对比之后，发觉这个 wallace-cli 比较符合我个人口味，于是就稍微倒腾了一下。
$ npm install -g wallace-cli
看到这个，应该都知道怎么去安装，我也就不过多废话了。具体的一些介绍也可以到https://github.com/bartveneman/wallace-cli 这里去看，下面简单说一下。
$ wallace https://projectwallace.com
$ wallace 'body { color: red; }'
$ echo 'html { font-size: 16px; } | wallace
$ wallace 'html {}' --format=json
$ cat style.css | wallace --compact
$ curl http://localhost/css/style.css | wallace
使用的方式有以上几种，后面要介绍的方式是第五种，就目前使用的情况来看，感觉这种方式在本地做分析还是不错的。第一种方法可以分析网络上的 CSS 文件，反正我自己没成功，也并不是我想要的方式，不管了，就主要来说一下第五种我自己所使用的这个方式。
只要是命令行，想要简单的了解，在命令后面跟上 --help 应该是不会有错的。这个帮助提示信息其实在 github 也已经有了，结合一下基本上就是这么几种形式：
$ wallace 'body { color: red; }'
$ wallace 'body { color: red; }' -c
$ wallace 'body { color: red; }' -f=json
$ wallace 'body { color: red; }' -f=json -c
输出的结果主要就是表格形式、json 格式形式以及这两种模式中是否采用简洁模式输出。在默认情况下不采用 json 格式输出，效果大概如下：
内容较长，就截取部分，如果想看效果可以参考上面那个 github 地址的截图
如果对于 json 文件有兴趣的话，那就可以自行去处理 json 文件，大概的格式会是这样：
这里用红框标注的地方，大概的意思是带 @ 符号的规则，比如：@font-faces 或者 @imports，在红框这里就是使用 @font-faces 的次数（总的所有次数、独立的不同的个数以及罗列所有不同@font-faces 的列表）。具体的可以在 https://github.com/projectwallace/css-analyzer 这里看到，因为在分析的结果中并不一定会包含所有的数据，CSS 文件中没用到的属性就不会被分析出来。
上面基本上就是一些准备工作了，接下来就要开始整起来。以CanIuse简化版这个小程序为例，分步骤操作。在具体操作之前，可以先看一下之前介绍的一个命令《方便好用的 tree》。
Step 1__
$ tree -fi . | grep wxss > ~/Desktop/cssFileList.txt
通过 tree 命令直接把当前目录下所有 wxss 文件都输出，并去掉树状结构的图形，最后输出到 cssFileList.txt 文件中。在输出到文件之前，我们可以先看一下罗列出来的内容是这样的：
所以在最后在 cssFileList.txt 文件中，我们得到的内容就是：
Step 2__
在 wallace 的帮助中提到可以通过 cat 命令后再输出结果。
$ cat style.css | wallace
而现在得到了 5 个文件，所以，现在要做的就是把这几个文件的内容合并到 1 个 CSS 文件内。除非你想分析 5 次，然后再把每次的分析结果再自己去计算一次。合并到 1 个文件中后，直接分析这个 CSS 文件就好，直接了当。
在合并文件之前，先通过 vscode 里把刚得到的文件列表做一个处理。思路是：通过 cat 命令把文件叠加输出到 1 个文件内，并让输出的命令一次性完成。
通过正则匹配替换之后，发现最后多了一点内容，删掉就好了。
哦了，现在就把最后的结果复制出来，黏贴到 terminal 终端中运行，然后回车去桌面找文件吧。
在桌面上找到文件后，打开看一下就知道了，不会有人没事写这么多行的 CSS 文件吧。
Step 3__
接下来就是要分析这个最终生成的 CSS 文件了，如果只是为了看效果，那么就不要输出 json 格式。
$ cat ~/Desktop/getCSS.css | wallace
这样的输出结果是一个表格，挺大的，所以，加上一个 -c 参数。
cat ~/Desktop/getCSS.css | wallace -c
这样看数据就可以了，但看不到具体的内容。比如下面这两张截图就是上面的结果的其中一部分。
如果有兴趣的话，可以把这个表格数据输出到文本中，但需要注意会把终端中的颜色代码也会输出，需要用正则匹配去替换删除。
$ cat ~/Desktop/getCSS.css | wallace -c > ~/Desktop/wallace_c.html
看着挺乱的，是吧。没事，替换换之后就干净了。
好了，其实这并不是我所想要的东西，虽然可以通过输出这个内容，然后在 HTML 文件中加上
标签后，就可以保持格式展示在网页中了。但最好的办法，个人觉得还是通过 json 文件方式输出之后，再根据自己的需要去选择。
$ cat ~/Desktop/getCSS.css | wallace -f=json > ~/Desktop/wallace_f.json
简单一下就有我们需要的 json 文件在桌面上了。打开 json 文件之后，接下来你想干什么就看你怎么去利用这个 json 文件了。
这截图部分是属性使用次数的数据，在前面所提到的表格形式中也是没有的。整个 json 文件都有哪些，https://github.com/projectwallace/css-analyzer 这里都已经有了具体示例说明了。
Step 4__
接下来就是发挥你自己的想象去处理那个 json 文件了，选择自己所需要的内容，然后通过 ajax 或者其他什么方式读取展示出来。如果是要分析一个站点内的所有的 CSS 文件，那么就搞一个 select 下拉框选择一个文件名就展示一个分析结果。
有了这些分析结果，最后要不要改善你的 CSS 内容，这个就是看具体需求了。
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路，越走越远。