feature(minification): add basic experimental support for closure compiler and babili

Author: danbucholtz

config/babili.config.js

@@ -0,0 +1,14 @@
+
+// https://www.npmjs.com/package/babili
+
+module.exports = {
+ /**
+ * sourceFile: The javascript file to minify
+ */
+ sourceFile: process.env.IONIC_OUTPUT_JS_FILE_NAME,
+
+ /**
+ * destFileName: file name for the minified js in the build dir
+ */
+ destFileName: process.env.IONIC_OUTPUT_JS_FILE_NAME,
+}

config/closure.config.js

@@ -9,5 +9,9 @@ module.exports = {
  * `java` will suffice. Verify by running `java --version`
  */
  pathToJavaExecutable: 'java',
- pathToClosureJar: process.env.IONIC_CLOSURE_JAR
+ pathToClosureJar: process.env.IONIC_CLOSURE_JAR,
+ optimization: 'ADVANCED_OPTIMIZATIONS',
+ languageIn: `ECMASCRIPT6`,
+ languageOut: 'ECMASCRIPT5',
+ debug: false
 };

config/rollup.config.js

@@ -19,7 +19,7 @@ var rollupConfig = {
  * sourceMap: If true, a separate sourcemap file will
  * be created.
  */
- sourceMap: process.env.IONIC_GENERATE_SOURCE_MAP ? true : false,
+ sourceMap: process.env.IONIC_GENERATE_SOURCE_MAP === 'true' ? true : false,
 
  /**
  * format: The format of the generated bundle

config/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
  filename: '[name].js',
  devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
- devtool: process.env.IONIC_GENERATE_SOURCE_MAP ? process.env.IONIC_SOURCE_MAP_TYPE : '',
+ devtool: process.env.IONIC_GENERATE_SOURCE_MAP === 'true' ? process.env.IONIC_SOURCE_MAP_TYPE : '',
 
  resolve: {
  extensions: ['.ts', '.js', '.json'],
@@ -33,8 +33,8 @@ module.exports = {
 
  plugins: [
  ionicWebpackFactory.getIonicEnvironmentPlugin(),
- ionicWebpackFactory.getNonIonicCommonChunksPlugin(),
- ionicWebpackFactory.getIonicCommonChunksPlugin()
+ // ionicWebpackFactory.getNonIonicCommonChunksPlugin(),
+ // ionicWebpackFactory.getIonicCommonChunksPlugin()
  ],
 
  // Some libraries import Node modules but don't use them in the browser.

package.json

@@ -83,6 +83,7 @@
  "@types/uglify-js": "^2.0.27",
  "@types/webpack": "^1.12.35",
  "@types/ws": "^0.0.34",
+ "babili": "0.0.10",
  "conventional-changelog-cli": "1.2.0",
  "github": "0.2.4",
  "ionic-cz-conventional-changelog": "1.0.0",

src/aot/aot-compiler.ts

@@ -2,7 +2,7 @@ import { mkdirpSync, readFileSync, writeFileSync } from 'fs-extra';
 import { basename, dirname, extname, join, normalize, relative, resolve } from 'path';
 
 import 'reflect-metadata';
-import { CallExpression, CompilerOptions, createProgram, createSourceFile, Decorator, Identifier, ParsedCommandLine, Program, ScriptTarget, SyntaxKind, transpileModule, TranspileOptions, TranspileOutput } from 'typescript';
+import { CompilerOptions, createProgram, ParsedCommandLine, Program, transpileModule, TranspileOptions, TranspileOutput } from 'typescript';
 import { CodeGenerator, NgcCliOptions, NodeReflectorHostContext, ReflectorHost, StaticReflector }from '@angular/compiler-cli';
 import { tsc } from '@angular/tsc-wrapped/src/tsc';
 import AngularCompilerOptions from '@angular/tsc-wrapped/src/options';
@@ -12,13 +12,11 @@ import { getInstance as getHybridFileSystem } from '../util/hybrid-file-system-f
 import { getInstance } from './compiler-host-factory';
 import { NgcCompilerHost } from './compiler-host';
 import { patchReflectorHost } from './reflector-host';
-import { findNodes, getNodeStringContent, getTypescriptSourceFile, removeDecorators } from '../util/typescript-utils';
 import { getFallbackMainContent, replaceBootstrap } from './utils';
 import { Logger } from '../logger/logger';
 import { printDiagnostics, clearDiagnostics, DiagnosticsType } from '../logger/logger-diagnostics';
 import { runTypeScriptDiagnostics } from '../logger/logger-typescript';
 import { isDebugMode } from '../util/config';
-import * as Constants from '../util/constants';
 import { BuildError } from '../util/errors';
 import { changeExtension } from '../util/helpers';
 import { BuildContext } from '../util/interfaces';
@@ -32,7 +30,6 @@ export class AotCompiler {
  private reflectorHost: ReflectorHost;
  private compilerHost: NgcCompilerHost;
  private fileSystem: HybridFileSystem;
- private appLevelNgModuleFilePath: string;
  private lazyLoadedModuleDictionary: any;
 
  constructor(private context: BuildContext, private options: AotOptions) {
@@ -96,9 +93,7 @@ export class AotCompiler {
  if (!mainFile) {
  throw new BuildError(new Error(`Could not find entry point (bootstrap file) ${this.options.entryPoint}`));
  }
- const mainSourceFile = getTypescriptSourceFile(mainFile.path, mainFile.content, ScriptTarget.Latest, false);
  Logger.debug('[AotCompiler] compile: Resolving NgModule from entry point');
- this.appLevelNgModuleFilePath = this.options.appNgModulePath
  let modifiedFileContent: string = null;
  try {
  Logger.debug('[AotCompiler] compile: Dynamically changing entry point content to AOT mode content');

src/babili.ts

@@ -0,0 +1,89 @@
+import { join } from 'path';
+import { spawn } from 'cross-spawn';
+
+import { fillConfigDefaults, getUserConfigFile } from './util/config';
+import { BuildContext, TaskInfo } from './util/interfaces';
+import { Logger } from './logger/logger';
+import { writeFileAsync } from './util/helpers';
+
+export function babili(context: BuildContext, configFile?: string) {
+
+ configFile = getUserConfigFile(context, taskInfo, configFile);
+ const logger = new Logger('babili - experimental');
+
+ return babiliWorker(context, configFile).then(() => {
+ logger.finish();
+ })
+ .catch(err => {
+ throw logger.fail(err);
+ });
+}
+
+
+export function babiliWorker(context: BuildContext, configFile: string): Promise<any> {
+ const babiliConfig: BabiliConfig = fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
+ // TODO - figure out source maps??
+ return runBabili(context, babiliConfig).then((minifiedCode: string) => {
+ // write the file back to disk
+ const fileToWrite = join(context.buildDir, babiliConfig.destFileName);
+ return writeFileAsync(fileToWrite, minifiedCode);
+ });
+}
+
+function runBabili(context: BuildContext, config: BabiliConfig) {
+ const babiliPath = join(context.rootDir, 'node_modules', '.bin', 'babili');
+ const bundlePath = join(context.buildDir, config.sourceFile);
+ return runBabiliImpl(babiliPath, bundlePath);
+}
+
+function runBabiliImpl(pathToBabili: string, pathToBundle: string) {
+ // TODO - is there a better way to run this?
+ let chunks: string[] = [];
+ return new Promise((resolve, reject) => {
+ const command = spawn(pathToBabili, [pathToBundle]);
+ command.stdout.on('data', (buffer: Buffer) => {
+ const stringRepresentation = buffer.toString();
+ Logger.debug(`[Babili] ${stringRepresentation}`);
+ chunks.push(stringRepresentation);
+ });
+
+ command.stderr.on('data', (buffer: Buffer) => {
+ Logger.warn(`[Babili] ${buffer.toString()}`);
+ });
+
+ command.on('close', (code: number) => {
+ if ( code !== 0) {
+ return reject(new Error('Babili failed with a non-zero status code'));
+ }
+ return resolve(chunks.join(''));
+ });
+
+
+ /*exec(`${pathToBabili} ${pathToBundle}`, (err: Error, stdout: string, stderr: string) => {
+ console.log('err: ', err.message);
+ console.log('stdout: ', stdout);
+ console.log('stderr: ', stderr);
+ if (err) {
+ reject(err);
+ } else {
+ resolve(stdout);
+ }
+ });
+ */
+ });
+}
+
+export const taskInfo: TaskInfo = {
+ fullArg: '--babili',
+ shortArg: null,
+ envVar: 'IONIC_EXP_BABILI',
+ packageConfig: 'ionic_exp_babili',
+ defaultConfigFile: 'babili.config'
+};
+
+
+export interface BabiliConfig {
+ // https://www.npmjs.com/package/uglify-js
+ sourceFile: string;
+ destFileName: string;
+}

src/build.ts

@@ -10,7 +10,7 @@ import { lint, lintUpdate } from './lint';
 import { Logger } from './logger/logger';
 import { minifyCss, minifyJs } from './minify';
 import { ngc } from './ngc';
-import { preprocess } from './preprocess';
+import { preprocess, preprocessUpdate } from './preprocess';
 import { sass, sassUpdate } from './sass';
 import { templateUpdate } from './template';
 import { transpile, transpileUpdate, transpileDiagnosticsOnly } from './transpile';
@@ -211,9 +211,10 @@ function buildUpdateTasks(changedFiles: ChangedFile[], context: BuildContext) {
  changedFiles: []
  };
 
- return Promise.resolve()
+ return loadFiles(changedFiles, context)
  .then(() => {
- return loadFiles(changedFiles, context);
+ // PREPROCESS
+ return preprocessUpdate(changedFiles, context);
  })
  .then(() => {
  // TEMPLATE

src/closure.ts

@@ -1,9 +1,14 @@
-import { execSync } from 'child_process';
+import { join } from 'path';
+import { spawn } from 'cross-spawn';
+
+import * as Constants from './util/constants';
+import { copyFileAsync, getBooleanPropertyValue, generateRandomHexString, unlinkAsync } from './util/helpers';
 import { BuildContext, TaskInfo } from './util/interfaces';
 import { fillConfigDefaults, generateContext, getUserConfigFile } from './util/config';
 import { Logger } from './logger/logger';
 import { runWorker } from './worker-client';
 
+
 export function closure(context: BuildContext, configFile?: string) {
  configFile = getUserConfigFile(context, taskInfo, configFile);
 
@@ -14,33 +19,110 @@ export function closure(context: BuildContext, configFile?: string) {
  logger.finish();
  })
  .catch(err => {
+ console.log('err: ', err);
  throw logger.fail(err);
  });
 }
 
 export function closureWorker(context: BuildContext, configFile: string): Promise<any> {
+ context = generateContext(context);
+ const tempFileName = generateRandomHexString(10) + '.js';
+ const tempFilePath = join(context.buildDir, tempFileName);
+ const closureConfig = getClosureConfig(context, configFile);
+ const bundleFilePath = join(context.buildDir, process.env[Constants.ENV_OUTPUT_JS_FILE_NAME]);
+ return runClosure(closureConfig, bundleFilePath, tempFilePath, context.buildDir, closureConfig.debug)
+ .then(() => {
+ const promises: Promise<any>[] = [];
+ promises.push(copyFileAsync(tempFilePath, bundleFilePath));
+ promises.push(copyFileAsync(tempFilePath + '.map', bundleFilePath + '.map'));
+ return Promise.all(promises);
+ }).then(() => {
+ // delete the temp bundle either way
+ const promises: Promise<any>[] = [];
+ promises.push(unlinkAsync(tempFilePath));
+ promises.push(unlinkAsync(tempFilePath + '.map'));
+ return Promise.all(promises);
+ }).catch(err => {
+ // delete the temp bundle either way
+ unlinkAsync(tempFilePath);
+ unlinkAsync(tempFilePath + '.map');
+ throw err;
+ });
+}
+
+function checkIfJavaIsAvailable(closureConfig: ClosureConfig) {
  return new Promise((resolve, reject) => {
- context = generateContext(context);
- Logger.warn('Closer Compiler unsupported at this time.');
- resolve();
+ const command = spawn(`${closureConfig.pathToJavaExecutable}`, ['-version']);
+
+ command.stdout.on('data', (buffer: Buffer) => {
+ Logger.debug(`[Closure]: ${buffer.toString()}`);
+ });
+
+ command.stderr.on('data', (buffer: Buffer) => {
+ Logger.warn(`[Closure]: ${buffer.toString()}`);
+ });
+
+ command.on('close', (code: number) => {
+ if (code === 0) {
+ return resolve();
+ }
+ reject();
+ });
  });
 }
 
+function runClosure(closureConfig: ClosureConfig, nonMinifiedBundlePath: string, minifiedBundleFileName: string, outputDir: string, isDebug: boolean) {
+ return new Promise((resolve, reject) => {
+ const closureArgs = ['-jar', `${closureConfig.pathToClosureJar}`,
+ '--js', `${nonMinifiedBundlePath}`,
+ '--js_output_file', `${minifiedBundleFileName}`,
+ `--language_out=${closureConfig.languageOut}`,
+ '--language_in', `${closureConfig.languageIn}`,
+ '--compilation_level', `${closureConfig.optimization}`,
+ `--create_source_map=%outname%.map`,
+ `--variable_renaming_report=${outputDir}/variable_renaming_report`,
+ `--property_renaming_report=${outputDir}/property_renaming_report`,
+ `--rewrite_polyfills=false`,
+ ];
 
-export function isClosureSupported(context: BuildContext): boolean{
- /*const config = getClosureConfig(context, '');
- try {
- execSync(`${config.pathToJavaExecutable} --version`);
- return true;
- } catch (ex) {
- Logger.debug('[Closure] isClosureSupported: Failed to execute java command');
- return false;
+ if (isDebug) {
+ closureArgs.push('--debug');
+ }
+ const closureCommand = spawn(`${closureConfig.pathToJavaExecutable}`, closureArgs);
+
+ closureCommand.stdout.on('data', (buffer: Buffer) => {
+ Logger.debug(`[Closure] ${buffer.toString()}`);
+ });
+
+ closureCommand.stderr.on('data', (buffer: Buffer) => {
+ Logger.debug(`[Closure] ${buffer.toString()}`);
+ });
+
+ closureCommand.on('close', (code: number) => {
+ if (code === 0) {
+ return resolve();
+ }
+ reject(new Error('Closure failed with a non-zero status code'));
+ });
+ });
+}
+
+
+export function isClosureSupported(context: BuildContext): Promise<boolean> {
+ if (!getBooleanPropertyValue(Constants.ENV_USE_EXPERIMENTAL_CLOSURE)) {
+ return Promise.resolve(false);
  }
- */
- return false;
+ Logger.debug('[Closure] isClosureSupported: Checking if Closure Compiler is available');
+ const config = getClosureConfig(context);
+ return checkIfJavaIsAvailable(config).then(() => {
+ return Promise.resolve(true);
+ }).catch(() => {
+ Logger.warn(`Closure Compiler support is enabled but Java cannot be started. Try running the build again with the "--debug" argument for more information.`);
+ return Promise.resolve(false);
+ });
 }
 
-function getClosureConfig(context: BuildContext, configFile: string): ClosureConfig {
+function getClosureConfig(context: BuildContext, configFile?: string): ClosureConfig {
  configFile = getUserConfigFile(context, taskInfo, configFile);
 
  return fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
@@ -59,4 +141,8 @@ export interface ClosureConfig {
  // https://developers.google.com/closure/compiler/docs/gettingstarted_app
  pathToJavaExecutable: string;
  pathToClosureJar: string;
+ optimization: string;
+ languageOut: string;
+ languageIn: string;
+ debug: boolean;
 }

src/copy.ts

@@ -5,7 +5,7 @@ import { fillConfigDefaults, generateContext, getUserConfigFile, replacePathVars
 import * as Constants from './util/constants';
 import { emit, EventType } from './util/events';
 import { generateGlobTasks, globAll, GlobObject, GlobResult } from './util/glob-util';
-import { copyFileAsync, rimRafAsync, unlinkAsync } from './util/helpers';
+import { copyFileAsync, getBooleanPropertyValue, rimRafAsync, unlinkAsync } from './util/helpers';
 import { BuildContext, ChangedFile, TaskInfo } from './util/interfaces';
 import { Watcher, copyUpdate as watchCopyUpdate } from './watch';
 
@@ -41,7 +41,7 @@ export function copyWorker(context: BuildContext, configFile: string) {
  // basically, we've got a stew goin'
  return populateFileAndDirectoryInfo(resultMap, copyConfig, toCopyList, directoriesToCreate);
  }).then(() => {
- if (process.env[Constants.ENV_CLEAN_BEFORE_COPY]) {
+ if (getBooleanPropertyValue(Constants.ENV_CLEAN_BEFORE_COPY)) {
  cleanDirectories(context, directoriesToCreate);
  }
  }).then(() => {