refactor(build): consolidate build options (#4105)

Fix #4138

BREAKING CHANGE:

- `--extractCss` defaults to `false` on all `--dev` (`ng build` with no flags uses `--dev`)
-  `--aot` defaults to true in `--prod`
- the alias for `--output-path` is now `-op` instead of `-o`

docs/documentation/build.md

@@ -65,6 +65,8 @@ All builds make use of bundling, and using the `--prod` flag in  `ng build --pro
 or `ng serve --prod` will also make use of uglifying and tree-shaking functionality.
 
 ## Options
+`--watch` (`-w`) flag to run builds when files change
+
 `--target` (`-t`) define the build target
 
 `--environment` (`-e`) defines the build environment
@@ -73,16 +75,22 @@ or `ng serve --prod` will also make use of uglifying and tree-shaking functional
 
 `--dev` flag to set build target and environment to development
 
-`--output-path` (`-o`) path where output will be placed
+`--output-path` (`-po`) path where output will be placed
 
-`--output-hashing` define the output filename cache-busting hashing mode
+`--aot` flag whether to build using Ahead of Time compilation
 
-`--watch` (`-w`) flag to run builds when files change
+`--sourcemap` (`-sm`) output sourcemaps
 
-`--surpress-sizes` flag to suppress sizes from build output
+`--vendor-chunk` (`-vb`) use a separate bundle containing only vendor libraries
 
 `--base-href` (`-bh`) base url for the application being built
 
-`--aot` flag whether to build using Ahead of Time compilation
+`--deploy-url` (`-d`) url where files will be deployed
+
+`--verbose` (`-v`) adds more details to output logging
+
+`--progress` (`-pr`) log progress to the console while building
 
-`--extract-css` extract css from global styles onto css files instead of js ones
+`--extract-css` (`-ec`) extract css from global styles onto css files instead of js ones
+
+`--output-hashing` define the output filename cache-busting hashing mode

docs/documentation/serve.md

@@ -8,11 +8,9 @@
 ## Options
 `--port` (`-p`) port to serve the application on
 
-`--host` (`-H`)
+`--host` (`-H`) host where to listen
 
-`--proxy-config` (`-pc`)
-
-`--watcher` (`-w`) provide a new watcher
+`--proxy-config` (`-pc`) proxy configuration file
 
 `--live-reload` (`-lr`) flag to turn off live reloading
 
@@ -24,18 +22,40 @@
 
 `--live-reload-live-css` flag to live reload CSS
 
-`--target` (`-t`, `-dev`, `-prod`) target environment
-
-`--environment` (`-e`) build environment
-
 `--ssl` flag to turn on SSL
 
 `--ssl-key` path to the SSL key
 
 `--ssl-cert` path to the SSL cert
 
-`--aot` flag to turn on Ahead of Time compilation
-
 `--open` (`-o`) opens the app in the default browser
 
-`--extract-css` extract css from global styles onto css files instead of js ones
+`--hmr` use hot module reload
+
+`--target` (`-t`) define the build target
+
+`--environment` (`-e`) defines the build environment
+
+`--prod` flag to set build target and environment to production
+
+`--dev` flag to set build target and environment to development
+
+`--output-path` (`-po`) path where output will be placed
+
+`--aot` flag whether to build using Ahead of Time compilation
+
+`--sourcemap` (`-sm`) output sourcemaps
+
+`--vendor-chunk` (`-vb`) use a separate bundle containing only vendor libraries
+
+`--base-href` (`-bh`) base url for the application being built
+
+`--deploy-url` (`-d`) url where files will be deployed
+
+`--verbose` (`-v`) adds more details to output logging
+
+`--progress` (`-pr`) log progress to the console while building
+
+`--extract-css` (`-ec`) extract css from global styles onto css files instead of js ones
+
+`--output-hashing` define the output filename cache-busting hashing mode

packages/angular-cli/commands/build.run.ts

@@ -1,46 +1,16 @@
 import { Version } from '../upgrade/version';
-import WebpackBuild from '../tasks/build-webpack';
-import { BuildOptions } from './build';
-
-export default function buildRun(commandOptions: BuildOptions) {
-  if (commandOptions.environment === '') {
-    if (commandOptions.target === 'development') {
-      commandOptions.environment = 'dev';
-    }
-    if (commandOptions.target === 'production') {
-      commandOptions.environment = 'prod';
-    }
-  }
-
-  if (!commandOptions.outputHashing) {
-    if (commandOptions.target === 'development') {
-      commandOptions.outputHashing = 'none';
-    }
-    if (commandOptions.target === 'production') {
-      commandOptions.outputHashing = 'all';
-    }
-  }
-
-  if (typeof commandOptions.sourcemap === 'undefined') {
-    if (commandOptions.target == 'development') {
-      commandOptions.sourcemap = true;
-    }
-    if (commandOptions.target == 'production') {
-      commandOptions.sourcemap = false;
-    }
-  }
+import Build from '../tasks/build';
+import { BuildTaskOptions } from './build';
 
+export default function buildRun(commandOptions: BuildTaskOptions) {
   const project = this.project;
 
   // Check angular version.
   Version.assertAngularVersionIs2_3_1OrHigher(project.root);
 
-  const buildTask = new WebpackBuild({
+  const buildTask = new Build({
       cliProject: project,
       ui: this.ui,
-      outputPath: commandOptions.outputPath,
-      target: commandOptions.target,
-      environment: commandOptions.environment,
     });
 
   return buildTask.run(commandOptions);

packages/angular-cli/commands/build.ts

@@ -1,63 +1,51 @@
+import { BuildOptions } from '../models/webpack-config';
+
 const Command = require('../ember-cli/lib/models/command');
 
-export interface BuildOptions {
-  target?: string;
-  environment?: string;
-  outputPath?: string;
+// defaults for BuildOptions
+export const BaseBuildCommandOptions: any = [
+  {
+    name: 'target',
+    type: String,
+    default: 'development',
+    aliases: ['t', { 'dev': 'development' }, { 'prod': 'production' }]
+  },
+  { name: 'environment', type: String, aliases: ['e'] },
+  { name: 'output-path', type: 'Path', aliases: ['op'] },
+  { name: 'aot', type: Boolean, default: false },
+  { name: 'sourcemap', type: Boolean, aliases: ['sm'] },
+  { name: 'vendor-chunk', type: Boolean, default: true, aliases: ['vc'] },
+  { name: 'base-href', type: String, default: '/', aliases: ['bh'] },
+  { name: 'deploy-url', type: String, aliases: ['d'] },
+  { name: 'verbose', type: Boolean, default: false, aliases: ['v'] },
+  { name: 'progress', type: Boolean, default: true, aliases: ['pr'] },
+  { name: 'i18n-file', type: String },
+  { name: 'i18n-format', type: String },
+  { name: 'locale', type: String },
+  { name: 'extract-css', type: Boolean, aliases: ['ec']},
+  {
+    name: 'output-hashing',
+    type: String,
+    values: ['none', 'all', 'media', 'bundles'],
+    description: 'define the output filename cache-busting hashing mode',
+    aliases: ['oh']
+  },
+];
+
+export interface BuildTaskOptions extends BuildOptions {
   watch?: boolean;
-  watcher?: string;
-  supressSizes: boolean;
-  baseHref?: string;
-  aot?: boolean;
-  sourcemap?: boolean;
-  vendorChunk?: boolean;
-  verbose?: boolean;
-  progress?: boolean;
-  i18nFile?: string;
-  i18nFormat?: string;
-  locale?: string;
-  deployUrl?: string;
-  outputHashing?: string;
-  extractCss?: boolean | null;
 }
 
 const BuildCommand = Command.extend({
   name: 'build',
   description: 'Builds your app and places it into the output path (dist/ by default).',
   aliases: ['b'],
 
-  availableOptions: [
-    {
-      name: 'target',
-      type: String,
-      default: 'development',
-      aliases: ['t', { 'dev': 'development' }, { 'prod': 'production' }]
-    },
-    { name: 'environment',    type: String,  default: '', aliases: ['e'] },
-    { name: 'output-path',    type: 'Path',  default: null, aliases: ['o'] },
-    { name: 'watch',          type: Boolean, default: false, aliases: ['w'] },
-    { 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: 'sourcemap',      type: Boolean, aliases: ['sm'] },
-    { name: 'vendor-chunk',   type: Boolean, default: true },
-    { name: 'verbose',        type: Boolean, default: false },
-    { name: 'progress',       type: Boolean, default: true },
-    { name: 'i18n-file',      type: String, default: null },
-    { name: 'i18n-format',    type: String, default: null },
-    { name: 'locale',         type: String, default: null },
-    { name: 'deploy-url',     type: String,  default: null, aliases: ['d'] },
-    {
-      name: 'output-hashing',
-      type: String,
-      values: ['none', 'all', 'media', 'bundles'],
-      description: 'define the output filename cache-busting hashing mode'
-    },
-    { name: 'extract-css',    type: Boolean, default: true }
-  ],
+  availableOptions: BaseBuildCommandOptions.concat([
+    { name: 'watch', type: Boolean, default: false, aliases: ['w'] }
+  ]),
 
-  run: function (commandOptions: BuildOptions) {
+  run: function (commandOptions: BuildTaskOptions) {
     return require('./build.run').default.call(this, commandOptions);
   }
 });

packages/angular-cli/commands/github-pages-deploy.run.ts

@@ -6,7 +6,7 @@ import * as chalk from 'chalk';
 import * as fs from 'fs';
 import * as fse from 'fs-extra';
 import * as path from 'path';
-import WebpackBuild from '../tasks/build-webpack';
+import Build from '../tasks/build';
 import CreateGithubRepo from '../tasks/create-github-repo';
 import { CliConfig } from '../models/config';
 import { GithubPagesDeployOptions } from './github-pages-deploy';
@@ -44,7 +44,7 @@ export default function githubPagesDeployRun(options: GithubPagesDeployOptions,
   // declared here so that tests can stub exec
   const execPromise = <(cmd: string, options?: any) => Promise<string>>denodeify(exec);
 
-  const buildTask = new WebpackBuild({
+  const buildTask = new Build({
     ui: this.ui,
     cliProject: this.project,
     target: options.target,

packages/angular-cli/commands/serve.run.ts

@@ -2,7 +2,7 @@ import * as denodeify from 'denodeify';
 const assign = require('lodash/assign');
 const SilentError = require('silent-error');
 const PortFinder = require('portfinder');
-import ServeWebpackTask from '../tasks/serve-webpack';
+import ServeTask from '../tasks/serve';
 import { Version } from '../upgrade/version';
 import { ServeTaskOptions } from './serve';
 
@@ -11,37 +11,19 @@ PortFinder.basePort = 49152;
 const getPort = <any>denodeify(PortFinder.getPort);
 
 export default function serveRun(commandOptions: ServeTaskOptions) {
-  if (commandOptions.environment === '') {
-    if (commandOptions.target === 'development') {
-      commandOptions.environment = 'dev';
-    }
-    if (commandOptions.target === 'production') {
-      commandOptions.environment = 'prod';
-    }
-  }
-
-  // default to extractCss to true on prod target
-  if (typeof commandOptions.extractCss === 'undefined') {
-    commandOptions.extractCss = commandOptions.target === 'production';
-  }
-
   // Check angular version.
   Version.assertAngularVersionIs2_3_1OrHigher(this.project.root);
   commandOptions.liveReloadHost = commandOptions.liveReloadHost || commandOptions.host;
 
   return checkExpressPort(commandOptions)
     .then(() => autoFindLiveReloadPort(commandOptions))
     .then((opts: ServeTaskOptions) => {
-      commandOptions = assign({}, opts, {
-        baseURL: this.project.config(commandOptions.target).baseURL || '/'
-      });
-
-      const serve = new ServeWebpackTask({
+      const serve = new ServeTask({
         ui: this.ui,
         project: this.project,
       });
 
-      return serve.run(commandOptions);
+      return serve.run(opts);
     });
 }