Make the output more readable

Author: stephencookdev

README.md

@@ -1,32 +1,9 @@
-# Speed Measure Plugin
+<div align="center"><h1>Speed Measure Plugin</h1></div>
+<br>
 
 This plugin measures your webpack build speed, giving an output like this:
 
-```
-----------------------------
-General output time took 1.01 minutes
-
-IgnorePlugin took 0.62 seconds
-ForceCaseSensitivityPlugin took 20.27 seconds
-SpriteLoaderPlugin took 30 milliseconds
-ExtractTextPlugin took 9.44 seconds
-DefinePlugin took 1 milliseconds
-
-thread-loader, and
-babel-loader took 0.56 minutes
-    Med   = 401 milliseconds,
-    x̄     = 1.08 seconds,
-    σ     = 0.57 seconds,
-    range = (268 milliseconds, 2.49 seconds),
-    n     = 247
-file-loader took 7.11 seconds
-    Med   = 1.41 seconds,
-    x̄     = 1.26 seconds,
-    σ     = 436 milliseconds,
-    range = (340 milliseconds, 2.02 seconds),
-    n     = 29
-----------------------------
-```
+![Preview of Speed Measure Plugin's output](preview.png)
 
 # Getting Started
 

colours.js

@@ -0,0 +1,16 @@
+const green = "\x1b[32m";
+const yellow = "\x1b[33m";
+const red = "\x1b[31m";
+const bold = "\x1b[1m";
+const end = "\x1b[0m";
+
+module.exports.b = (text, time) => {
+  let colour;
+  if (time >= 0) colour = green;
+  if (time > 2000) colour = yellow;
+  if (time > 10000) colour = red;
+
+  return (colour || "") + bold + text + end;
+};
+
+module.exports.stripColours = text => text.replace(/\x1b\[[0-9]+m/g, "");

index.js

@@ -7,6 +7,7 @@ const {
   getPluginsOutput,
   getLoadersOutput,
 } = require("./output");
+const { stripColours } = require("./colours");
 
 module.exports = class SpeedMeasurePlugin {
   constructor(options) {
@@ -99,10 +100,11 @@ module.exports = class SpeedMeasurePlugin {
 
       const output = this.getOutput();
       if (this.options.outputTarget) {
+        const strippedOutput = stripColours(output);
         const writeMethod = fs.existsSync(this.options.outputTarget)
           ? fs.appendFile
           : fs.writeFile;
-        writeMethod(this.options.outputTarget, output + "\n", err => {
+        writeMethod(this.options.outputTarget, strippedOutput + "\n", err => {
           if (err) throw err;
           console.log("Outputted timing info to " + this.options.outputTarget);
         });

output.js

@@ -1,3 +1,4 @@
+const { b } = require("./colours");
 const { groupBy, getAverages, getTotalActiveTime } = require("./utils");
 
 const humanTime = ms => {
@@ -11,22 +12,25 @@ const humanTime = ms => {
   return ms.toFixed(0) + " milliseconds";
 };
 
-const b = text => "\x1b[1m" + text + "\x1b[0m";
-const bb = text => "\x1b[1m\x1b[32m" + text + "\x1b[0m";
-
 module.exports.getHumanOutput = outputObj => {
   const delim = "----------------------------";
   let output = delim + "\n";
 
   if (outputObj.misc) {
     output +=
-      "General output time took " + bb(humanTime(outputObj.misc.compileTime));
+      "General output time took " +
+      b(humanTime(outputObj.misc.compileTime), outputObj.misc.compileTime);
     output += "\n\n";
   }
   if (outputObj.plugins) {
     Object.keys(outputObj.plugins).forEach(pluginName => {
       output +=
-        b(pluginName) + " took " + bb(humanTime(outputObj.plugins[pluginName]));
+        b(pluginName) +
+        " took " +
+        b(
+          humanTime(outputObj.plugins[pluginName]),
+          outputObj.plugins[pluginName]
+        );
       output += "\n";
     });
     output += "\n";
@@ -36,22 +40,24 @@ module.exports.getHumanOutput = outputObj => {
       output +=
         loaderObj.loaders.map(b).join(", and \n") +
         " took " +
-        bb(humanTime(loaderObj.activeTime));
+        b(humanTime(loaderObj.activeTime), loaderObj.activeTime);
       output += "\n";
-      output += "    Med   = " + humanTime(loaderObj.averages.median) + ",\n";
-      output += "    x̄     = " + humanTime(loaderObj.averages.mean) + ",\n";
+      output +=
+        "    mean         = " + humanTime(loaderObj.averages.median) + ",\n";
+      output +=
+        "    median       = " + humanTime(loaderObj.averages.mean) + ",\n";
       if (typeof loaderObj.averages.variance === "number")
         output +=
-          "    σ     = " +
+          "    s.d          = " +
           humanTime(Math.sqrt(loaderObj.averages.variance)) +
           ", \n";
       output +=
-        "    range = (" +
+        "    range        = (" +
         humanTime(loaderObj.averages.range.start) +
         ", " +
         humanTime(loaderObj.averages.range.end) +
         "), \n";
-      output += "    n     = " + loaderObj.averages.dataPoints + "\n";
+      output += "    module count = " + loaderObj.averages.dataPoints + "\n";
     });
   }