feat(fusuma): improve build output logs

Author: hiroppy

packages/fusuma/src/tasks/build.js

@@ -45,10 +45,12 @@ async function build(config, isConsoleOutput = true) {
   spinner.stop();
 
   if (isConsoleOutput) {
-    outputBuildInfo(stats);
-  }
+    const logs = outputBuildInfo(stats);
+    const last = logs.splice(-1);
 
-  info('build', 'Completed!');
+    console.info(logs.join('\n'));
+    info('build', last);
+  }
 }
 
 module.exports = build;

packages/fusuma/src/webpack/outputBuildInfo.js

@@ -7,6 +7,8 @@ function outputBuildInfo(res) {
   let gzFilesNum = 0;
   let totalSize = 0;
   let maxStringSize = 0;
+  let hiddenFilesNum = 0;
+  const outputStack = [];
 
   const assets = Object.entries(res.compilation.assets).map(([name, asset]) => {
     const size = asset.size();
@@ -23,9 +25,7 @@ function outputBuildInfo(res) {
     };
   });
 
-  assets.sort((a, b) => {
-    return b.size - a.size;
-  });
+  assets.sort((a, b) => b.size - a.size);
 
   assets.forEach(({ name, size }) => {
     let filename = name;
@@ -35,6 +35,11 @@ function outputBuildInfo(res) {
       gzFilesNum++;
     }
 
+    if (size <= 4000) {
+      hiddenFilesNum++;
+      return;
+    }
+
     if (name.includes('.js')) {
       if (assets.some(({ name }) => name === `${filename}.gz`) || name.includes('.LICENSE')) {
         filename = chalk.gray(name);
@@ -47,20 +52,26 @@ function outputBuildInfo(res) {
       } else {
         filename = chalk.blue(name);
       }
-    } else if (name.includes('.html')) {
+    } else if (name.includes('.ttf')) {
       filename = chalk.redBright(name);
     } else if (name.includes('.webp')) {
       filename = chalk.magenta(name);
     }
 
-    console.log(`${filename} ${' '.repeat(maxStringSize - name.length)}${fileSize}`);
+    outputStack.push(`${filename} ${' '.repeat(maxStringSize - name.length)}${fileSize}`);
   });
 
-  console.log();
-  console.log(
-    `Total ${assets.length} files (gzip: ${gzFilesNum}) -`,
-    chalk.greenBright(prettyBytes(totalSize))
+  outputStack.push(`  + ${hiddenFilesNum} hidden files`);
+  outputStack.push('');
+  outputStack.push(
+    chalk.white(
+      `Total ${assets.length} files (gzip: ${gzFilesNum} files) - ${chalk.greenBright(
+        prettyBytes(totalSize)
+      )}`
+    )
   );
+
+  return outputStack;
 }
 
 module.exports = outputBuildInfo;