From cbf5e0291795b5e87bbc78fea5ce03676d777d30 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 24 Oct 2016 16:10:56 +0100 Subject: [PATCH] feat(build): add --verbose flag Currently builds output a lot of information, some of which can hide errors, by default. This PR cuts down on the information shown and adds a `--verbose` flag to restore previous build output. --- packages/angular-cli/commands/build.ts | 4 +- packages/angular-cli/commands/serve.ts | 2 + .../models/webpack-build-production.ts | 6 ++- .../angular-cli/models/webpack-build-utils.ts | 18 +++++--- packages/angular-cli/models/webpack-config.ts | 9 ++-- .../angular-cli/tasks/build-webpack-watch.ts | 14 ++++-- packages/angular-cli/tasks/build-webpack.ts | 17 +++++--- packages/angular-cli/tasks/serve-webpack.ts | 43 +++++++++++-------- 8 files changed, 71 insertions(+), 42 deletions(-) diff --git a/packages/angular-cli/commands/build.ts b/packages/angular-cli/commands/build.ts index 744b405fe567..d272d8857e79 100644 --- a/packages/angular-cli/commands/build.ts +++ b/packages/angular-cli/commands/build.ts @@ -11,6 +11,7 @@ export interface BuildOptions { supressSizes: boolean; baseHref?: string; aot?: boolean; + verbose?: boolean; } const BuildCommand = Command.extend({ @@ -31,7 +32,8 @@ const BuildCommand = Command.extend({ { name: 'watcher', type: String }, { name: 'suppress-sizes', type: Boolean, default: false }, { name: 'base-href', type: String, default: null, aliases: ['bh'] }, - { name: 'aot', type: Boolean, default: false } + { name: 'aot', type: Boolean, default: false }, + { name: 'verbose', type: Boolean, default: false } ], run: function (commandOptions: BuildOptions) { diff --git a/packages/angular-cli/commands/serve.ts b/packages/angular-cli/commands/serve.ts index 7c16c49993b8..07cd530aec4f 100644 --- a/packages/angular-cli/commands/serve.ts +++ b/packages/angular-cli/commands/serve.ts @@ -26,6 +26,7 @@ export interface ServeTaskOptions { sslKey?: string; sslCert?: string; aot?: boolean; + verbose?: boolean; open?: boolean; } @@ -81,6 +82,7 @@ const ServeCommand = Command.extend({ { name: 'ssl-key', type: String, default: 'ssl/server.key' }, { name: 'ssl-cert', type: String, default: 'ssl/server.crt' }, { name: 'aot', type: Boolean, default: false }, + { name: 'verbose', type: Boolean, default: false }, { name: 'open', type: Boolean, diff --git a/packages/angular-cli/models/webpack-build-production.ts b/packages/angular-cli/models/webpack-build-production.ts index 3ff408ad9a07..70020b902781 100644 --- a/packages/angular-cli/models/webpack-build-production.ts +++ b/packages/angular-cli/models/webpack-build-production.ts @@ -13,7 +13,9 @@ declare module 'webpack' { } } -export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) { +export const getWebpackProdConfigPartial = function(projectRoot: string, + appConfig: any, + verbose: any) { return { devtool: 'source-map', output: { @@ -29,7 +31,7 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf }), new webpack.optimize.UglifyJsPlugin({ mangle: { screw_ie8 : true }, - compress: { screw_ie8: true }, + compress: { screw_ie8: true, warnings: verbose }, sourceMap: true }), new CompressionPlugin({ diff --git a/packages/angular-cli/models/webpack-build-utils.ts b/packages/angular-cli/models/webpack-build-utils.ts index b1853ea5ae00..ed948e6164ba 100644 --- a/packages/angular-cli/models/webpack-build-utils.ts +++ b/packages/angular-cli/models/webpack-build-utils.ts @@ -6,18 +6,22 @@ export const ngAppResolve = (resolvePath: string): string => { export const webpackOutputOptions = { colors: true, + hash: true, + timings: true, chunks: true, + chunkModules: false, + children: false, // listing all children is very noisy in AOT and hides warnings/errors modules: false, reasons: false, - chunkModules: false + warnings: true, + assets: false, // listing all assets is very noisy when using assets directories + version: false }; -export const webpackDevServerOutputOptions = { +export const verboseWebpackOutputOptions = { + children: true, assets: true, - colors: true, version: true, - hash: true, - timings: true, - chunks: false, - chunkModules: false + reasons: true, + chunkModules: false // TODO: set to true when console to file output is fixed }; diff --git a/packages/angular-cli/models/webpack-config.ts b/packages/angular-cli/models/webpack-config.ts index 6317fef937a3..31f3d33b5de6 100644 --- a/packages/angular-cli/models/webpack-config.ts +++ b/packages/angular-cli/models/webpack-config.ts @@ -23,7 +23,8 @@ export class NgCliWebpackConfig { public environment: string, outputDir?: string, baseHref?: string, - isAoT = false + isAoT = false, + verbose = false ) { const config: CliConfig = CliConfig.fromProject(); const appConfig = config.config.apps[0]; @@ -36,7 +37,7 @@ export class NgCliWebpackConfig { appConfig, baseHref ); - let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig); + let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig, verbose); const typescriptConfigPartial = isAoT ? getWebpackAotConfigPartial(this.ngCliProject.root, appConfig) : getWebpackNonAotConfigPartial(this.ngCliProject.root, appConfig); @@ -58,12 +59,12 @@ export class NgCliWebpackConfig { ); } - getTargetConfig(projectRoot: string, appConfig: any): any { + getTargetConfig(projectRoot: string, appConfig: any, verbose: boolean): any { switch (this.target) { case 'development': return getWebpackDevConfigPartial(projectRoot, appConfig); case 'production': - return getWebpackProdConfigPartial(projectRoot, appConfig); + return getWebpackProdConfigPartial(projectRoot, appConfig, verbose); default: throw new Error("Invalid build target. Only 'development' and 'production' are available."); } diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/packages/angular-cli/tasks/build-webpack-watch.ts index 700c977298e4..bb4766ea0912 100644 --- a/packages/angular-cli/tasks/build-webpack-watch.ts +++ b/packages/angular-cli/tasks/build-webpack-watch.ts @@ -4,7 +4,7 @@ const Task = require('ember-cli/lib/models/task'); import * as webpack from 'webpack'; const ProgressPlugin = require('webpack/lib/ProgressPlugin'); import { NgCliWebpackConfig } from '../models/webpack-config'; -import { webpackOutputOptions } from '../models/'; +import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/'; import { BuildOptions } from '../commands/build'; import { CliConfig } from '../models/config'; @@ -24,12 +24,18 @@ export default Task.extend({ runTaskOptions.environment, outputDir, runTaskOptions.baseHref, - runTaskOptions.aot + runTaskOptions.aot, + runTaskOptions.verbose ).config; const webpackCompiler: any = webpack(config); + const statsOptions = runTaskOptions.verbose + ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) + : webpackOutputOptions; + webpackCompiler.apply(new ProgressPlugin({ - profile: true + profile: runTaskOptions.verbose, + colors: true })); return new Promise((resolve, reject) => { @@ -43,7 +49,7 @@ export default Task.extend({ if (stats.hash !== lastHash) { lastHash = stats.hash; - process.stdout.write(stats.toString(webpackOutputOptions) + '\n'); + process.stdout.write(stats.toString(statsOptions) + '\n'); } }); }); diff --git a/packages/angular-cli/tasks/build-webpack.ts b/packages/angular-cli/tasks/build-webpack.ts index 80fc0b9e62a5..9a8baf6737a6 100644 --- a/packages/angular-cli/tasks/build-webpack.ts +++ b/packages/angular-cli/tasks/build-webpack.ts @@ -1,10 +1,11 @@ import * as rimraf from 'rimraf'; import * as path from 'path'; -const Task = require('ember-cli/lib/models/task'); import * as webpack from 'webpack'; +const Task = require('ember-cli/lib/models/task'); +const ProgressPlugin = require('webpack/lib/ProgressPlugin'); import { BuildOptions } from '../commands/build'; import { NgCliWebpackConfig } from '../models/webpack-config'; -import { webpackOutputOptions } from '../models/'; +import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/'; import { CliConfig } from '../models/config'; // Configure build and output; @@ -23,7 +24,8 @@ export default Task.extend({ runTaskOptions.environment, outputDir, runTaskOptions.baseHref, - runTaskOptions.aot + runTaskOptions.aot, + runTaskOptions.verbose ).config; // fail on build error @@ -31,10 +33,13 @@ export default Task.extend({ const webpackCompiler: any = webpack(config); - const ProgressPlugin = require('webpack/lib/ProgressPlugin'); + const statsOptions = runTaskOptions.verbose + ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) + : webpackOutputOptions; webpackCompiler.apply(new ProgressPlugin({ - profile: true + profile: runTaskOptions.verbose, + colors: true })); return new Promise((resolve, reject) => { @@ -51,7 +56,7 @@ export default Task.extend({ if (stats.hash !== lastHash) { lastHash = stats.hash; - process.stdout.write(stats.toString(webpackOutputOptions) + '\n'); + process.stdout.write(stats.toString(statsOptions) + '\n'); } resolve(); }); diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts index 9c2e0a6229ad..a8d4237b40d5 100644 --- a/packages/angular-cli/tasks/serve-webpack.ts +++ b/packages/angular-cli/tasks/serve-webpack.ts @@ -6,7 +6,7 @@ const Task = require('ember-cli/lib/models/task'); import * as webpack from 'webpack'; const WebpackDevServer = require('webpack-dev-server'); const ProgressPlugin = require('webpack/lib/ProgressPlugin'); -import { webpackDevServerOutputOptions } from '../models/'; +import { webpackOutputOptions, verboseWebpackOutputOptions } from '../models/'; import { NgCliWebpackConfig } from '../models/webpack-config'; import { ServeTaskOptions } from '../commands/serve'; import { CliConfig } from '../models/config'; @@ -15,35 +15,40 @@ import * as url from 'url'; const opn = require('opn'); export default Task.extend({ - run: function(commandOptions: ServeTaskOptions) { + run: function(serveTaskOptions: ServeTaskOptions) { const ui = this.ui; let webpackCompiler: any; let config = new NgCliWebpackConfig( this.project, - commandOptions.target, - commandOptions.environment, + serveTaskOptions.target, + serveTaskOptions.environment, undefined, undefined, - commandOptions.aot + serveTaskOptions.aot, + serveTaskOptions.verbose ).config; // This allows for live reload of page when changes are made to repo. // https://webpack.github.io/docs/webpack-dev-server.html#inline-mode config.entry.main.unshift( - `webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/` + `webpack-dev-server/client?http://${serveTaskOptions.host}:${serveTaskOptions.port}/` ); webpackCompiler = webpack(config); + const statsOptions = serveTaskOptions.verbose + ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions) + : webpackOutputOptions; + webpackCompiler.apply(new ProgressPlugin({ - profile: true, + profile: serveTaskOptions.verbose, colors: true })); let proxyConfig = {}; - if (commandOptions.proxyConfig) { - const proxyPath = path.resolve(this.project.root, commandOptions.proxyConfig); + if (serveTaskOptions.proxyConfig) { + const proxyPath = path.resolve(this.project.root, serveTaskOptions.proxyConfig); if (fs.existsSync(proxyPath)) { proxyConfig = require(proxyPath); } else { @@ -54,12 +59,12 @@ export default Task.extend({ let sslKey: string = null; let sslCert: string = null; - if (commandOptions.ssl) { - const keyPath = path.resolve(this.project.root, commandOptions.sslKey); + if (serveTaskOptions.ssl) { + const keyPath = path.resolve(this.project.root, serveTaskOptions.sslKey); if (fs.existsSync(keyPath)) { sslKey = fs.readFileSync(keyPath, 'utf-8'); } - const certPath = path.resolve(this.project.root, commandOptions.sslCert); + const certPath = path.resolve(this.project.root, serveTaskOptions.sslCert); if (fs.existsSync(certPath)) { sslCert = fs.readFileSync(certPath, 'utf-8'); } @@ -73,14 +78,14 @@ export default Task.extend({ historyApiFallback: { disableDotRule: true, }, - stats: webpackDevServerOutputOptions, + stats: statsOptions, inline: true, proxy: proxyConfig, - compress: commandOptions.target === 'production', + compress: serveTaskOptions.target === 'production', watchOptions: { poll: CliConfig.fromProject().config.defaults.poll }, - https: commandOptions.ssl + https: serveTaskOptions.ssl }; if (sslKey != null && sslCert != null) { @@ -91,19 +96,21 @@ export default Task.extend({ ui.writeLine(chalk.green(oneLine` ** NG Live Development Server is running on - http${commandOptions.ssl ? 's' : ''}://${commandOptions.host}:${commandOptions.port}. + http${serveTaskOptions.ssl ? 's' : ''}://${serveTaskOptions.host}:${serveTaskOptions.port}. ** `)); const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfiguration); return new Promise((resolve, reject) => { - server.listen(commandOptions.port, `${commandOptions.host}`, function(err: any, stats: any) { + server.listen(serveTaskOptions.port, + `${serveTaskOptions.host}`, + function(err: any, stats: any) { if (err) { console.error(err.stack || err); if (err.details) { console.error(err.details); } reject(err.details); } else { - const { open, host, port } = commandOptions; + const { open, host, port } = serveTaskOptions; if (open) { opn(url.format({ protocol: 'http', hostname: host, port: port.toString() })); }