build: no sourcemaps in inline styles (#4885)

* In components inline styles there shouldn't be any Sourcemap reference. This adds bloat and also doesn't do anything right now.
* No longer builds sourcemaps for all compiled SCSS. The sourcemaps don't work for development either (styles are inlined too)
* Prebuilt themes no longer contain source-maps.

Author: devversion

package.json

@@ -81,7 +81,6 @@
     "gulp-markdown": "^1.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.6.0",
     "gulp-transform": "^2.0.0",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.11.0",

tools/gulp/gulpfile.ts

@@ -20,3 +20,4 @@ import './tasks/payload';
 import './tasks/coverage';
 import './tasks/material-release';
 import './tasks/universal';
+import './tasks/validate-release';

tools/gulp/tasks/publish.ts

@@ -98,6 +98,7 @@ task(':publish', async () => {
 task('publish', sequenceTask(
   ':publish:whoami',
   ':publish:build-releases',
+  'validate-release:check-bundles',
   ':publish',
   ':publish:logout',
 ));

tools/gulp/tasks/validate-release.ts

@@ -0,0 +1,42 @@
+import {task} from 'gulp';
+import {DIST_RELEASES, RELEASE_PACKAGES} from '../build-config';
+import {readFileSync} from 'fs';
+import {join} from 'path';
+import {green, red} from 'chalk';
+import {sequenceTask} from '../util/task_helpers';
+
+/** RegExp that matches Angular component inline styles that contain a sourcemap reference. */
+const inlineStylesSourcemapRegex = /styles: ?\[(?:"|').*sourceMappingURL=.*(?:"|')/;
+
+task('validate-release', sequenceTask(':publish:build-releases', 'validate-release:check-bundles'));
+
+/** Task that checks the release bundles for any common mistakes before releasing to the public. */
+task('validate-release:check-bundles', () => {
+  const bundleFailures = RELEASE_PACKAGES
+    .map(packageName => join(DIST_RELEASES, packageName, '@angular', `${packageName}.js`))
+    .map(packageBundle => checkPackageBundle(packageBundle))
+    .map((failures, index) => ({failures, packageName: RELEASE_PACKAGES[index]}));
+
+  bundleFailures.forEach(({failures, packageName}) => {
+    failures.forEach(failure => console.error(red(`Failure (${packageName}): ${failure}`)));
+  });
+
+  if (bundleFailures.some(({failures}) => failures.length > 0)) {
+    // Throw an error to notify Gulp about the failures that have been detected.
+    throw 'Release bundles are not valid and ready for being released.';
+  } else {
+    console.log(green('Release bundles have been checked and are looking fine.'));
+  }
+});
+
+/** Task that checks the given release bundle for common mistakes. */
+function checkPackageBundle(bundlePath: string): string[] {
+  const bundleContent = readFileSync(bundlePath, 'utf8');
+  const failures = [];
+
+  if (inlineStylesSourcemapRegex.exec(bundleContent) !== null) {
+    failures.push('Bundles contain sourcemap references in component styles.');
+  }
+
+  return failures;
+}

tools/gulp/util/task_helpers.ts

@@ -9,7 +9,6 @@ import {yellow} from 'chalk';
 const gulpClean = require('gulp-clean');
 const gulpRunSequence = require('run-sequence');
 const gulpSass = require('gulp-sass');
-const gulpSourcemaps = require('gulp-sourcemaps');
 const gulpConnect = require('gulp-connect');
 const gulpIf = require('gulp-if');
 const gulpCleanCss = require('gulp-clean-css');
@@ -47,10 +46,8 @@ export function ngcBuildTask(tsConfigPath: string) {
 export function sassBuildTask(dest: string, root: string, minify = false) {
   return () => {
     return gulp.src(_globify(root, '**/*.scss'))
-      .pipe(gulpSourcemaps.init({ loadMaps: true }))
       .pipe(gulpSass().on('error', gulpSass.logError))
       .pipe(gulpIf(minify, gulpCleanCss()))
-      .pipe(gulpSourcemaps.write('.'))
       .pipe(gulp.dest(dest));
   };
 }