From 00f82317370c91b71b825df2e20f0621a8c62d28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Wed, 4 Dec 2019 11:24:46 +0800 Subject: [PATCH] feat(cli): add stepper to improve logging --- packages/vant-cli/src/commands/build.ts | 30 ++++++++++--------- packages/vant-cli/src/commands/commit-lint.ts | 2 +- packages/vant-cli/src/commands/lint.ts | 18 +++++------ packages/vant-cli/src/common/index.ts | 7 +---- packages/vant-cli/src/common/logger.ts | 25 ++++++++++++++++ .../vant-cli/src/compiler/compile-site.ts | 10 +++++-- .../src/compiler/gen-style-deps-map.ts | 5 ---- 7 files changed, 59 insertions(+), 38 deletions(-) create mode 100644 packages/vant-cli/src/common/logger.ts diff --git a/packages/vant-cli/src/commands/build.ts b/packages/vant-cli/src/commands/build.ts index b2b330435..c13725605 100644 --- a/packages/vant-cli/src/commands/build.ts +++ b/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); } } diff --git a/packages/vant-cli/src/commands/commit-lint.ts b/packages/vant-cli/src/commands/commit-lint.ts index a73d88a2a..f77d4d9af 100644 --- a/packages/vant-cli/src/commands/commit-lint.ts +++ b/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 /; diff --git a/packages/vant-cli/src/commands/lint.ts b/packages/vant-cli/src/commands/lint.ts index 349b5fca3..0949aaacb 100644 --- a/packages/vant-cli/src/commands/lint.ts +++ b/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'); } }); } diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index 10bdf60b2..1f1b15ad6 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/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 }; diff --git a/packages/vant-cli/src/common/logger.ts b/packages/vant-cli/src/common/logger.ts new file mode 100644 index 000000000..0f8a53a71 --- /dev/null +++ b/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; + +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 }; diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts index bf6a86faa..4da52247f 100644 --- a/packages/vant-cli/src/compiler/compile-site.ts +++ b/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'); } diff --git a/packages/vant-cli/src/compiler/gen-style-deps-map.ts b/packages/vant-cli/src/compiler/gen-style-deps-map.ts index 07136628f..ef6b3d3a0 100644 --- a/packages/vant-cli/src/compiler/gen-style-deps-map.ts +++ b/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'); }