Use chalk for colour output, in order for better terminal colour support (and automatic detection and disabling)

Author: stephencookdev

colours.js

@@ -1,19 +1,12 @@
-const greenFg = "\x1b[32m";
-const yellowFg = "\x1b[33m";
-const redFg = "\x1b[31m";
-const blackBg = "\x1b[40m";
-const bold = "\x1b[1m";
-const end = "\x1b[0m";
+const chalk = require("chalk");
 
 module.exports.fg = (text, time) => {
-  let colour;
-  if (time >= 0) colour = greenFg;
-  if (time > 2000) colour = yellowFg;
-  if (time > 10000) colour = redFg;
+  let textModifier = chalk.bold;
+  if (time > 10000) textModifier = textModifier.red;
+  else if (time > 2000) textModifier = textModifier.yellow;
+  else textModifier = textModifier.green;
 
-  return (colour || "") + bold + text + end;
+  return textModifier(text);
 };
 
-module.exports.bg = text => blackBg + greenFg + bold + text + end;
-
-module.exports.stripColours = text => text.replace(/\x1b\[[0-9]+m/g, "");
+module.exports.bg = text => chalk.bgBlack.green.bold(text);

index.js

@@ -1,14 +1,15 @@
 const path = require("path");
 const fs = require("fs");
+const chalk = require("chalk");
 const { WrappedPlugin } = require("./WrappedPlugin");
 const { getModuleName, getLoaderNames, prependLoader } = require("./utils");
 const {
   getHumanOutput,
   getMiscOutput,
   getPluginsOutput,
   getLoadersOutput,
+  smpTag,
 } = require("./output");
-const { stripColours } = require("./colours");
 
 const NS = path.dirname(fs.realpathSync(__filename));
 
@@ -116,15 +117,19 @@ module.exports = class SpeedMeasurePlugin {
     compiler.plugin("done", () => {
       this.addTimeEvent("misc", "compile", "end", { fillLast: true });
 
+      const outputToFile = typeof this.options.outputTarget === "string";
+      chalk.enabled = !outputToFile;
       const output = this.getOutput();
-      if (typeof this.options.outputTarget === "string") {
-        const strippedOutput = stripColours(output);
+      chalk.enabled = true;
+      if (outputToFile) {
         const writeMethod = fs.existsSync(this.options.outputTarget)
           ? fs.appendFile
           : fs.writeFile;
-        writeMethod(this.options.outputTarget, strippedOutput + "\n", err => {
+        writeMethod(this.options.outputTarget, output + "\n", err => {
           if (err) throw err;
-          console.log("Outputted timing info to " + this.options.outputTarget);
+          console.log(
+            smpTag() + "Outputted timing info to " + this.options.outputTarget
+          );
         });
       } else {
         const outputFunc = this.options.outputTarget || console.log;

output.js

@@ -1,6 +1,7 @@
 const MS_IN_MINUTE = 60000;
 const MS_IN_SECOND = 1000;
 
+const chalk = require("chalk");
 const { fg, bg } = require("./colours");
 const { groupBy, getAverages, getTotalActiveTime } = require("./utils");
 
@@ -30,10 +31,12 @@ const humanTime = (ms, options = {}) => {
   return time;
 };
 
+const smpTag = () => bg(" SMP ") + " ⏱  ";
+module.exports.smpTag = smpTag;
+
 module.exports.getHumanOutput = (outputObj, options = {}) => {
   const hT = x => humanTime(x, options);
-  const smpTag = bg(" SMP ") + " ⏱ ";
-  let output = "\n\n" + smpTag + "\n";
+  let output = "\n\n" + smpTag() + "\n";
 
   if (outputObj.misc) {
     output +=
@@ -42,22 +45,22 @@ module.exports.getHumanOutput = (outputObj, options = {}) => {
     output += "\n\n";
   }
   if (outputObj.plugins) {
-    output += smpTag + " Plugins\n";
+    output += smpTag() + "Plugins\n";
     Object.keys(outputObj.plugins)
       .sort(
         (name1, name2) => outputObj.plugins[name2] - outputObj.plugins[name1]
       )
       .forEach(pluginName => {
         output +=
-          fg(pluginName) +
+          chalk.bold(pluginName) +
           " took " +
           fg(hT(outputObj.plugins[pluginName]), outputObj.plugins[pluginName]);
         output += "\n";
       });
     output += "\n";
   }
   if (outputObj.loaders) {
-    output += smpTag + " Loaders\n";
+    output += smpTag() + "Loaders\n";
     outputObj.loaders.build
       .sort((obj1, obj2) => obj2.activeTime - obj1.activeTime)
       .forEach(loaderObj => {

package.json

@@ -28,5 +28,8 @@
   "devDependencies": {
     "jest": "^22.3.0",
     "prettier": "1.10.2"
+  },
+  "dependencies": {
+    "chalk": "^2.0.1"
   }
 }