diff --git a/packages/scripts/src/bin/serve.ts b/packages/scripts/src/bin/serve.ts index 80d327b20..034f53d7a 100644 --- a/packages/scripts/src/bin/serve.ts +++ b/packages/scripts/src/bin/serve.ts @@ -20,6 +20,7 @@ import { printSuccessfullyCompiledMessage, printCompiledWithWarnMessage, printFailedCompileMEssage, + printGeneralInfoMessage, } from './utils'; /** @@ -114,6 +115,10 @@ export function serve(options: ProgramOptions | undefined): void { } printWatchingMessage(); }, + onBsChange(file) { + printGeneralInfoMessage(`changed: ${chalk.bold(file)}`); + printGeneralInfoMessage('reloading browser'); + }, }); server.serve(); diff --git a/packages/scripts/src/bin/utils.ts b/packages/scripts/src/bin/utils.ts index 59d13aa3d..75b74c2f1 100644 --- a/packages/scripts/src/bin/utils.ts +++ b/packages/scripts/src/bin/utils.ts @@ -27,9 +27,11 @@ ${chalk.bold(gradient.instagram(` \\_/\\_/`))} ${chalk.magenta( 'v' )}${chalk.bold.magenta(`${pkg.version}`)}`; +export const wpackLogoSmall = gradient.instagram('wpack.io'); + export function addTimeStampToLog(log: string): string { const time = new Date().toTimeString().split(' ')[0]; - return `${chalk.dim(`「wpack.io ${time}」`)} ${log}`; + return `${chalk.dim(`「${wpackLogoSmall} ${time}」`)} ${log}`; } export const watchSymbol = `${logSymbols.info}`; @@ -77,8 +79,6 @@ export function printGeneralInfoMessage(msg: string) { export const bulletSymbol = chalk.magenta(figures.pointer); -export const wpackLogoSmall = gradient.instagram('wpack.io'); - export const wpackLink = `${chalk.blue.underline('https://wpack.io')}`; export const wpackIntro = `${wpackLogo}\n`; diff --git a/packages/scripts/src/scripts/Server.ts b/packages/scripts/src/scripts/Server.ts index 8b1d8eaf8..3c29a9b82 100644 --- a/packages/scripts/src/scripts/Server.ts +++ b/packages/scripts/src/scripts/Server.ts @@ -16,6 +16,7 @@ interface Callbacks { firstCompile(stats: webpack.Stats): void; onError(err: { errors: string[]; warnings: string[] }): void; onWarn(warn: { errors: string[]; warnings: string[] }): void; + onBsChange(file: string): void; } /** @@ -177,7 +178,10 @@ export class Server { if (this.projectConfig.watch) { bs.watch(this.projectConfig.watch as string).on( 'change', - bs.reload + (file: string) => { + this.callbacks.onBsChange(file); + bs.reload(); + } ); } // We don't need to watch for manifest, because if user is changing