feat(scripts): show cli output on browser-sync reload

See #444
swashata · Apr 18, 2019 · c1885e2 · c1885e2
1 parent e63aa9b
commit c1885e2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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