feat(cli): add stepper to improve logging

packages/vant-cli/src/commands/build.ts

@@ -9,8 +9,8 @@ import { genPackageEntry } from '../compiler/gen-package-entry';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map';
 import { genComponentStyle } from '../compiler/gen-component-style';
 import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant';
+import { getStepper } from '../common/logger';
 import {
-  logger,
   isDir,
   isSfc,
   isStyle,
@@ -21,6 +21,8 @@ import {
   setModuleEnv
 } from '../common';
 
+const stepper = getStepper(8);
+
 async function compileDir(dir: string) {
   const files = readdirSync(dir);
 
@@ -56,53 +58,53 @@ async function compileDir(dir: string) {
 async function buildESModuleOutputs() {
   await copy(SRC_DIR, ES_DIR);
 
-  logger.start('Build esmodule outputs');
+  stepper.start('Build ESModule Outputs');
 
   try {
     setModuleEnv('esmodule');
     await compileDir(ES_DIR);
-    logger.success('Build esmodule outputs');
+    stepper.success('Build ESModule Outputs');
   } catch (err) {
-    logger.error('Build esmodule outputs');
+    stepper.error('Build ESModule Outputs', err);
   }
 }
 
 async function buildCommonjsOutputs() {
   await copy(SRC_DIR, LIB_DIR);
 
-  logger.start('Build commonjs outputs');
+  stepper.start('Build Commonjs Outputs');
 
   try {
     setModuleEnv('commonjs');
     await compileDir(LIB_DIR);
-    logger.success('Build commonjs outputs');
+    stepper.success('Build Commonjs Outputs');
   } catch (err) {
-    logger.error('Build commonjs outputs');
+    stepper.error('Build Commonjs Outputs', err);
   }
 }
 
 async function buildStyleEntry() {
-  logger.start('Build style entry');
+  await genStyleDepsMap();
 
+  stepper.start('Build Style Entry');
   try {
-    await genStyleDepsMap();
     genComponentStyle();
-    logger.success('Build style entry');
+    stepper.success('Build Style Entry');
   } catch (err) {
-    logger.error('Build style entry');
+    stepper.error('Build Style Entry', err);
   }
 }
 
 async function buildPackedOutputs() {
-  logger.start('Build packed outputs');
+  stepper.start('Build Packed Outputs');
 
   try {
     genPackageEntry();
     await compilePackage(false);
     await compilePackage(true);
-    logger.success('Build packed outputs');
+    stepper.success('Build Packed Outputs');
   } catch (err) {
-    logger.error('Build packed outputs');
+    stepper.error('Build Packed Outputs', err);
   }
 }
 

packages/vant-cli/src/commands/commit-lint.ts

@@ -1,5 +1,5 @@
-import { logger } from '../common';
 import { readFileSync } from 'fs-extra';
+import { logger } from '../common/logger';
 
 const commitRE = /^(revert: )?(fix|feat|docs|perf|test|types|build|chore|refactor|breaking change)(\(.+\))?: .{1,50}/;
 const mergeRE = /Merge branch /;

packages/vant-cli/src/commands/lint.ts

@@ -1,10 +1,12 @@
 import { lint as stylelint } from 'stylelint';
 import { CLIEngine } from 'eslint';
-import { logger } from '../common';
+import { getStepper } from '../common/logger';
 import { SCRIPT_EXTS } from '../common/constant';
 
+const stepper = getStepper(4);
+
 function lintScript() {
-  logger.start('ESLint Start');
+  stepper.start('ESLint Start');
 
   const cli = new CLIEngine({
     fix: true,
@@ -19,15 +21,14 @@ function lintScript() {
   // output lint errors
   const formatted = formatter(report.results);
   if (formatted) {
-    logger.error('ESLint Failed');
-    console.log(formatter(report.results));
+    stepper.error('ESLint Failed', '\n' + formatter(report.results));
   } else {
-    logger.success('ESLint Passed');
+    stepper.success('ESLint Passed');
   }
 }
 
 function lintStyle() {
-  logger.start('Stylelint Start');
+  stepper.start('Stylelint Start');
 
   stylelint({
     fix: true,
@@ -35,10 +36,9 @@ function lintStyle() {
     files: ['src/**/*.css', 'src/**/*.less', 'src/**/*.scss', 'src/**/*.vue']
   }).then(result => {
     if (result.errored) {
-      logger.error('Stylelint Failed');
-      console.log(result.output);
+      stepper.error('Stylelint Failed', '\n' + result.output);
     } else {
-      logger.success('Stylelint Passed');
+      stepper.success('Stylelint Passed');
     }
   });
 }

packages/vant-cli/src/common/index.ts

@@ -1,14 +1,9 @@
-import logger from 'signale';
 import decamelize from 'decamelize';
 import { join } from 'path';
 import { get } from 'lodash';
 import { readdirSync, existsSync, lstatSync, readFileSync } from 'fs-extra';
 import { CONFIG, SRC_DIR, WEBPACK_CONFIG_FILE } from './constant';
 
-logger.config({
-  displayTimestamp: true
-});
-
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
 export const DEMO_REGEXP = /\/demo$/;
@@ -119,4 +114,4 @@ export function getCssLang(): string {
   return preprocessor;
 }
 
-export { logger, decamelize };
+export { decamelize };

packages/vant-cli/src/common/logger.ts

@@ -0,0 +1,25 @@
+import logger from 'signale';
+
+logger.config({
+  displayTimestamp: true
+});
+
+const methods = ['success', 'start', 'error'] as const;
+
+type Stepper = Pick<typeof logger, typeof methods[number]>;
+
+export function getStepper(totalStep: number) {
+  const stepper = {} as Stepper;
+  let currentStep = 0;
+
+  methods.forEach(key => {
+    stepper[key] = (message, ...args) => {
+      const prefix = `[${++currentStep}/${totalStep}] `;
+      return logger[key](prefix + message, ...args);
+    };
+  });
+
+  return stepper;
+}
+
+export { logger };

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,7 +1,7 @@
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { getPort } from 'portfinder';
-import { logger } from '../common';
+import { getStepper } from '../common/logger';
 import { genPackageEntry } from './gen-package-entry';
 import { genPacakgeStyle } from './gen-package-style';
 import { genSiteMobileShared } from './gen-site-mobile-shared';
@@ -10,9 +10,9 @@ import { genStyleDepsMap } from './gen-style-deps-map';
 import { siteDevConfig } from '../config/webpack.site.dev';
 import { sitePrdConfig } from '../config/webpack.site.prd';
 
-function watch() {
-  logger.start('Start development');
+const stpper = getStepper(4);
 
+function watch() {
   const server = new WebpackDevServer(
     webpack(siteDevConfig),
     (siteDevConfig as any).devServer
@@ -50,15 +50,19 @@ function build() {
 }
 
 export async function compileSite(production = false) {
+  stpper.start('Prepare For Compilation');
   await genStyleDepsMap();
   genPackageEntry();
   genPacakgeStyle();
   genSiteMobileShared();
   genSiteDesktopShared();
+  stpper.success('Prepare For Compilation');
 
+  stpper.start('Build Documentation Site');
   if (production) {
     await build();
   } else {
     watch();
   }
+  stpper.success('Build Documentation Site');
 }

packages/vant-cli/src/compiler/gen-style-deps-map.ts

@@ -8,7 +8,6 @@ import { compileJs } from './compile-js';
 import { compileSfc } from './compile-sfc';
 import { compileStyle } from './compile-style';
 import {
-  logger,
   isDir,
   isSfc,
   isStyle,
@@ -148,8 +147,6 @@ function getSequence(depsMap: DepsMap) {
 }
 
 export async function genStyleDepsMap() {
-  logger.start('Analyze dependencies');
-
   const map = {} as DepsMap;
 
   await copy(SRC_DIR, TEMP_DIR);
@@ -173,6 +170,4 @@ export async function genStyleDepsMap() {
     STYPE_DEPS_JSON_FILE,
     JSON.stringify({ map, sequence }, null, 2)
   );
-
-  logger.success('Analyze dependencies');
 }