build: create sourcemap files

* Creates sourceMap files for all bundles inside of the release.

Fixes #852

Author: devversion

package.json

@@ -106,6 +106,7 @@
     "sass": "^0.5.0",
     "scss-bundle": "^1.0.1",
     "selenium-webdriver": "^3.1.0",
+    "sorcery": "^0.10.0",
     "stylelint": "^7.8.0",
     "travis-after-modes": "0.0.7",
     "ts-node": "^3.0.0",

tools/gulp/tasks/library.ts

@@ -11,6 +11,7 @@ import {writeFileSync} from 'fs';
 // There are no type definitions available for these imports.
 const inlineResources = require('../../../scripts/release/inline-resources');
 const uglify = require('uglify-js');
+const sorcery = require('sorcery');
 
 const libraryRoot = join(SOURCE_ROOT, 'lib');
 const tsconfigPath = join(libraryRoot, 'tsconfig-build.json');
@@ -64,13 +65,17 @@ async function buildModuleEntry(entryFile: string, entryName = '') {
     format: 'es',
   });
 
+  await remapSourcemap(fesm2015File);
+
   // Downlevel FESM-2015 file to ES5.
   transpileFile(fesm2015File, fesm2014File, {
     target: ScriptTarget.ES5,
     module: ModuleKind.ES2015,
-    allowJs: true
+    allowJs: true,
   });
 
+  await remapSourcemap(fesm2014File);
+
   // Create UMD bundle of FESM-2014 output.
   await createRollupBundle({
     moduleName: moduleName,
@@ -79,8 +84,12 @@ async function buildModuleEntry(entryFile: string, entryName = '') {
     format: 'umd'
   });
 
+  await remapSourcemap(umdFile);
+
   // Output a minified version of the UMD bundle
-  writeFileSync(umdMinFile, uglify.minify(umdFile, { preserveComments: 'license' }).code);
+  uglifyFile(umdFile, umdMinFile);
+
+  await remapSourcemap(umdMinFile);
 }
 
 /**
@@ -92,3 +101,23 @@ task('library:assets', ['library:assets:scss', 'library:assets:html']);
 task('library:assets:scss', sassBuildTask(materialDir, libraryRoot, true));
 task('library:assets:html', copyTask(join(libraryRoot, '**/*.+(html|scss)'), materialDir));
 task('library:assets:inline', () => inlineResources(materialDir));
+
+/**
+ * Finds the original sourcemap of the file and maps it to the current file.
+ * This is useful when multiple transformation happen (e.g TSC -> Rollup -> Uglify)
+ **/
+async function remapSourcemap(sourceFile: string) {
+  (await sorcery.load(sourceFile)).write();
+}
+
+/** Minifies a JavaScript file using UglifyJS2. Also writes sourcemaps to the output. */
+function uglifyFile(inputPath: string, outputPath: string) {
+  let sourcemapOut = `${outputPath}.map`;
+  let result = uglify.minify(inputPath, {
+    preserveComments: 'license',
+    outSourceMap: sourcemapOut
+  });
+
+  writeFileSync(outputPath, result.code);
+  writeFileSync(sourcemapOut, result.map);
+}

tools/gulp/tasks/release.ts

@@ -26,9 +26,9 @@ const typingsGlob = join(DIST_MATERIAL, '**/*.+(d.ts|metadata.json)');
 // Matches the "package.json" and "README.md" file that needs to be shipped.
 const assetsGlob = join(COMPONENTS_DIR, '+(package.json|README.md)');
 // Matches all UMD bundles inside of the bundles distribution.
-const umdGlob = join(DIST_BUNDLES, '*.umd.*');
+const umdGlob = join(DIST_BUNDLES, '*.umd?(.min).js?(.map)');
 // Matches all flat ESM bundles (e.g material.js and material.es5.js)
-const fesmGlob = [join(DIST_BUNDLES, '*.js'), `!${umdGlob}`];
+const fesmGlob = [join(DIST_BUNDLES, '*.js?(.map)'), `!${umdGlob}`];
 
 // The entry-point for the scss theming bundle.
 const themingEntryPointPath = join(COMPONENTS_DIR, 'core', 'theming', '_all-theme.scss');

tools/gulp/util/rollup-helper.ts

@@ -58,6 +58,7 @@ export function createRollupBundle(config: BundleConfig): Promise<any> {
     format: config.format,
     dest: config.dest,
     globals: ROLLUP_GLOBALS,
+    sourceMap: true
   };
 
   return rollup.rollup(bundleOptions).then((bundle: any) => bundle.write(writeOptions));

tools/gulp/util/ts-compiler.ts

@@ -25,6 +25,10 @@ export function transpileFile(inputPath: string, outputPath: string, options: ts
   reportDiagnostics(transpiled.diagnostics);
 
   fs.writeFileSync(outputPath, transpiled.outputText);
+
+  if (transpiled.sourceMapText) {
+    fs.writeFileSync(`${outputPath}.map`, transpiled.sourceMapText);
+  }
 }
 
 /** Parses a TypeScript project configuration. */