I recently came across a tool for analyzing CSS through the command line: Wallace – CLI. At that time, I was looking for some related CSS analysis tools in the NPM site. After a few comparisons, I found that this Wallace – CLI is more in line with my personal taste, so I changed a little.

$ npm install -g wallace-cliCopy the code

See this, should all know how to install, I also but much nonsense. Some specific introduction can also go to https://github.com/bartveneman/wallace-cli, said the following.

$ 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 | wallaceCopy the code

There are several ways to use, the way to introduce the fifth way, on the current use of the situation, feel this way in the local analysis or good. The first way to analyze CSS files on the web is not the way I want to do it. Anyway, let’s focus on the fifth way I use it.

As long as you are on the command line, it should not go wrong to follow the command with –help. This help message is already available on Github.

$ wallace 'body { color: red; } '$ wallace 'body { color: red; }' -c$ wallace 'body { color: red; }' -f=json$ wallace 'body { color: red; }' -f=json -cCopy the code

The output is mainly in table format, JSON format, and whether concise mode is used in either mode. By default, the output is not in JSON format, which looks like this:

If the content is longer, take a screenshot from the github address above

If you are interested in json files, you can work with them yourself, and the format will look like this:

The places marked with red boxes here roughly mean rules with @ signs, such as: @font-FACES or @imports, in the red box, are the number of times @font-FACES has been used (total times, separate different numbers, and a list of all the different @font-faces). Specific can see here at https://github.com/projectwallace/css-analyzer, because in the result of analysis is not necessarily will contain all of the data, the CSS file attribute will not be useless to analysis.

So that’s basically the prep work, and then it’s time to get started. Take CanIuse simplified version of this small program as an example, step by step operation. Before doing this, take a look at the handy Tree command introduced earlier.

Step   1 __ 

$ tree -fi . | grep wxss > ~/Desktop/cssFileList.txtCopy the code

Run the tree command to directly output all WXSS files in the current directory, remove the tree structure graph, and finally output the WXSS file to the cssfilelist. TXT file. Before we export to the file, we can look at the listed contents like this:

So at the end in the cssFilelist. TXT file, we get this:

 

S tep  2__

Wallace’s help mentioned that you can output the results after the cat command.

$ cat style.css | wallaceCopy the code

Now you have five files, so all you need to do is merge the contents of these files into one CSS file. Unless you want to analyze it five times and then do the calculations yourself. Once merged into a single file, analyze the CSS file directly.

Before merging the files, do some processing with vscode on the list of files you just obtained. The idea is: use the cat command to stack files into one file, and make the output command complete at once.

After the regex match replacement, you find that there is a bit more content at the end, so delete it.

 

Now, copy the final result, paste it into the terminal and run it, and press Enter to find the file on your desktop.

When you find the file on your desktop, open it up and take a look at it. No one can write so many lines of CSS. 😆

Step   3 __

The next step is to analyze the resulting CSS file, if only for effect, then do not output json.

$ cat ~/Desktop/getCSS.css | wallaceCopy the code

The result of this output is a table, which is quite large, so add a -c argument.

cat ~/Desktop/getCSS.css | wallace -cCopy the code

You can look at the data like this, but you can’t see the specific content. For example, the two screenshots below are part of the results above.

If you are interested, you can print the table data to text, but note that the color code in the terminal will also be printed, and you need to replace it with a regular match.

$ cat ~/Desktop/getCSS.css | wallace -c > ~/Desktop/wallace_c.htmlCopy the code

Looks pretty messed up, doesn’t it? It’s okay. It’ll be clean after the replacement.

Well, that’s not exactly what I was looking for, although I can keep it formatted by printing it out and putting a <pre> tag in an HTML file. But the best way, I think or through json file output, and then according to their own needs to choose.

$ cat ~/Desktop/getCSS.css | wallace -f=json > ~/Desktop/wallace_f.jsonCopy the code

It’s easy to have the JSON file you need on your desktop. Once you open the JSON file, what you want to do with it is up to you.

This screenshot is the number of times the attribute is used, which is also not available in the table form mentioned above. What is the json file, https://github.com/projectwallace/css-analyzer here have the concrete examples.

S tep  4__

The next step is to use your imagination to manipulate the JSON file, select the content you want, and display it via Ajax or whatever. If you want to analyze all CSS files in a site, use a select dropdown to select a file name to display an analysis result.

With these results in mind, it’s up to you to improve your CSS content.