build: make the build output deterministic and reproducible (#11570)

<!-- 
Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed.
-->
## PR Checklist
Please check that your PR fulfills the following requirements:
- [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format)
- [x] Tests for the changes have been added or this is not a bug fix / enhancement
- [x] Docs have been added, updated, or were not required

## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
```
[ ] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[x] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:
```

## What is the current behavior?
Consecutive builds, without any changes, result in bundle content with different ordering. This is even true in a single build where the `dist/angular-material.js` isn't identical to the `dist/docs/angular-material.js`. This makes comparing releases harder and it makes syncing into g3 more time consuming.

- passing globs to `gulp.src` can cause ordering to not be preserved.
this is because `gulp.src` is async
- gulp-concat tries to preserve the order passed into `gulp.src`.
if the globbing is too vague, then there isn't enough info for ordering

<!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. -->
Issue Number: 
Fixes #11502

## What is the new behavior?
All of the build output (JS, SCSS, CSS) should be identical if the build is run multiple times without any changes to the code. 

## Does this PR introduce a breaking change?
```
[ ] Yes
[x] No
```
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
<!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. -->

## Other information
- more statically defining the paths like this isn't ideal but it is acceptable atm since we aren't adding new components.

I looked at sorting the file paths manually or using `gulp-sort` but neither solution was flexible enough to order some of our internal dependencies properly. This approach seems to work fine w/o adding `gulp-order`, but if problems pop up in the future, that is another package that might help.

Note that the root cause of this lies in the intersection of `gulp.src` in Gulp core and `gulp-concat`. This is a well established problem that the Gulp team has mostly decided to punt into user land or third party packages so that they can maintain speed and not need to support crazy levels of customization.

Author: Splaktar

docs/gulpfile.js

@@ -17,10 +17,6 @@ const argv = require('minimist')(process.argv.slice(2));
 const gutil = require('gulp-util');
 const series = require('stream-series');
 
-const config = {
-  demoFolder: 'demo-partials'
-};
-
 gulp.task('demos', function() {
   const demos = [];
   return generateDemos()

gulp/config.js

@@ -10,20 +10,89 @@ module.exports = {
   ' * @license MIT\n' +
   ' * v' + VERSION + '\n' +
   ' */\n',
-  jsBaseFiles: [
-    'src/core/**/*.js'
+  jsCoreFiles: [
+    'src/core/*.js',
+    'src/core/util/autofocus.js',
+    'src/core/util/color.js',
+    'src/core/util/constant.js',
+    'src/core/util/iterator.js',
+    'src/core/util/media.js',
+    'src/core/util/prefixer.js',
+    'src/core/util/util.js',
+    'src/core/util/animation/animate.js',
+    'src/core/util/animation/animateCss.js',
+    'src/core/services/aria/*.js',
+    'src/core/services/compiler/*.js',
+    'src/core/services/gesture/*.js',
+    'src/core/services/interaction/*.js',
+    'src/core/services/interimElement/*.js',
+    'src/core/services/layout/*.js',
+    'src/core/services/liveAnnouncer/*.js',
+    'src/core/services/meta/*.js',
+    'src/core/services/registry/*.js',
+    'src/core/services/ripple/button_ripple.js',
+    'src/core/services/ripple/checkbox_ripple.js',
+    'src/core/services/ripple/list_ripple.js',
+    'src/core/services/ripple/ripple.js',
+    'src/core/services/ripple/tab_ripple.js',
+    'src/core/services/theming/theme.palette.js',
+    'src/core/services/theming/theming.js'
   ],
-  jsFiles: [
+  jsHintFiles: [
     'src/**/*.js',
     '!src/**/*.spec.js'
   ],
-  mockFiles : [
+  componentPaths: [
+    'src/components/autocomplete',
+    'src/components/backdrop',
+    'src/components/bottomSheet',
+    'src/components/button',
+    'src/components/card',
+    'src/components/checkbox',
+    'src/components/chips',
+    'src/components/colors',
+    'src/components/content',
+    'src/components/datepicker',
+    'src/components/dialog',
+    'src/components/divider',
+    'src/components/fabActions',
+    'src/components/fabSpeedDial',
+    'src/components/fabToolbar',
+    'src/components/gridList',
+    'src/components/icon',
+    'src/components/input',
+    'src/components/list',
+    'src/components/menu',
+    'src/components/menuBar',
+    'src/components/navBar',
+    'src/components/panel',
+    'src/components/progressCircular',
+    'src/components/progressLinear',
+    'src/components/radioButton',
+    'src/components/select',
+    'src/components/showHide',
+    'src/components/sidenav',
+    'src/components/slider',
+    'src/components/sticky',
+    'src/components/subheader',
+    'src/components/swipe',
+    'src/components/switch',
+    'src/components/tabs',
+    'src/components/toast',
+    'src/components/toolbar',
+    'src/components/tooltip',
+    'src/components/truncate',
+    'src/components/virtualRepeat',
+    'src/components/whiteframe'
+  ],
+  mockFiles: [
     'test/angular-material-mocks.js'
   ],
   themeBaseFiles: [
     'src/core/style/variables.scss',
     'src/core/style/mixins.scss'
   ],
+  themeCore: 'src/core/style/core-theme.scss',
   scssBaseFiles: [
     'src/core/style/color-palette.scss',
     'src/core/style/variables.scss',
@@ -33,6 +102,7 @@ module.exports = {
     'src/core/style/layout.scss',
     'src/components/panel/*.scss'
   ],
+  scssServicesLayout: 'src/core/services/layout/layout.scss',
   scssLayoutFiles: [
     'src/core/style/variables.scss',
     'src/core/style/mixins.scss',
@@ -44,14 +114,46 @@ module.exports = {
     'src/core/style/mixins.scss',
     'src/core/services/layout/layout-attributes.scss'
   ],
-  scssPaths : [
-    'src/components/**/*.scss',
-    'src/core/services/**/*.scss'
+  scssComponentPaths: [
+    'src/components/autocomplete',
+    'src/components/backdrop',
+    'src/components/bottomSheet',
+    'src/components/button',
+    'src/components/card',
+    'src/components/checkbox',
+    'src/components/chips',
+    'src/components/content',
+    'src/components/datepicker',
+    'src/components/dialog',
+    'src/components/divider',
+    'src/components/fabSpeedDial',
+    'src/components/fabToolbar',
+    'src/components/gridList',
+    'src/components/icon',
+    'src/components/input',
+    'src/components/list',
+    'src/components/menu',
+    'src/components/menuBar',
+    'src/components/navBar',
+    // panel is included in scssBaseFiles above
+    'src/components/progressCircular',
+    'src/components/progressLinear',
+    'src/components/radioButton',
+    'src/components/select',
+    'src/components/sidenav',
+    'src/components/slider',
+    'src/components/sticky',
+    'src/components/subheader',
+    'src/components/swipe',
+    'src/components/switch',
+    'src/components/tabs',
+    'src/components/toast',
+    'src/components/toolbar',
+    'src/components/tooltip',
+    'src/components/truncate',
+    'src/components/virtualRepeat',
+    'src/components/whiteframe'
   ],
-  cssIEPaths : ['src/**/ie_fixes.css'],
-  paths: 'src/+(components|core)/**',
-  outputDir: 'dist/',
-  demoFolder: 'demo-partials'
+  cssIEPaths: ['src/**/ie_fixes.css'],
+  outputDir: 'dist/'
 };
-
-

gulp/tasks/build-demo.js

@@ -3,5 +3,5 @@ const util = require('../util');
 exports.dependencies = ['build', 'build-module-demo'];
 
 exports.task = function() {
-  return util.buildModule(util.readModuleArg(), false);
+  return util.buildModule(util.readModuleArg());
 };

gulp/tasks/build-js.js

@@ -1,5 +1,5 @@
 const util = require('../util');
 
 exports.task = function() {
-  return util.buildJs(true);
+  return util.buildJs();
 };

gulp/tasks/build-module-demo.js

@@ -18,24 +18,23 @@ exports.task = function() {
   const mod = util.readModuleArg();
   const name = mod.split('.').pop();
   const demoIndexTemplate = fs.readFileSync(
-      ROOT + '/docs/config/template/demo-index.template.html', 'utf8'
+    ROOT + '/docs/config/template/demo-index.template.html', 'utf8'
   ).toString();
 
   gutil.log('Building demos for', mod, '...');
 
   return utils.readModuleDemos(mod, function() {
     return lazypipe()
-        .pipe(gulpif, /.css$/, sass())
-        .pipe(gulpif, /.css$/, util.autoprefix())
-        .pipe(gulp.dest, BUILD_MODE.outputDir + name)
+    .pipe(gulpif, /.css$/, sass())
+    .pipe(gulpif, /.css$/, util.autoprefix())
+    .pipe(gulp.dest, BUILD_MODE.outputDir + name)
     ();
   })
-      .pipe(through2.obj(function(demo, enc, next) {
-        fs.writeFileSync(
-            path.resolve(BUILD_MODE.outputDir, name, demo.name, 'index.html'),
-            _.template(demoIndexTemplate)(demo)
-        );
-        next();
-      }));
-
+  .pipe(through2.obj(function(demo, enc, next) {
+    fs.writeFileSync(
+      path.resolve(BUILD_MODE.outputDir, name, demo.name, 'index.html'),
+      _.template(demoIndexTemplate)(demo)
+    );
+    next();
+  }));
 };

gulp/tasks/build-scss.js

@@ -13,101 +13,104 @@ const gulpif = require('gulp-if');
 const minifyCss = util.minifyCss;
 const args = util.args;
 const IS_DEV = require('../const').IS_DEV;
+const path = require('path');
 
 exports.task = function() {
   const streams = [];
-  const modules   = args.modules,
-      overrides = args.override,
-      dest      = args['output-dir'] || config.outputDir,
-      layoutDest= dest + 'layouts/';
+  const modules = args.modules,
+    overrides = args.override,
+    dest = args['output-dir'] || config.outputDir,
+    layoutDest = dest + 'layouts/';
 
   gutil.log("Building css files...");
 
   // create SCSS file for distribution
   streams.push(
     gulp.src(getPaths())
-      .pipe(util.filterNonCodeFiles())
-      .pipe(filter(['**', '!**/*.css']))
-      .pipe(filter(['**', '!**/*-theme.scss']))
-      .pipe(filter(['**', '!**/*-attributes.scss']))
-      .pipe(concat('angular-material.scss'))
-      .pipe(gulp.dest(dest))            // raw uncompiled SCSS
-      .pipe(sass())
-      .pipe(util.dedupeCss())
-      .pipe(util.autoprefix())
-      .pipe(insert.prepend(config.banner))
-      .pipe(gulp.dest(dest))                        // unminified
-      .pipe(gulpif(!IS_DEV, minifyCss()))
-      .pipe(gulpif(!IS_DEV, util.dedupeCss()))
-      .pipe(rename({extname: '.min.css'}))
-      .pipe(gulp.dest(dest))                        // minified
+    .pipe(util.filterNonCodeFiles())
+    .pipe(filter(['**', '!**/*.css']))
+    .pipe(filter(['**', '!**/*-theme.scss']))
+    .pipe(filter(['**', '!**/*-attributes.scss']))
+    .pipe(concat('angular-material.scss'))
+    .pipe(insert.prepend(config.banner))
+    .pipe(gulp.dest(dest))                        // raw uncompiled SCSS
+    .pipe(sass())
+    .pipe(util.dedupeCss())
+    .pipe(util.autoprefix())
+    .pipe(gulp.dest(dest))                        // unminified
+    .pipe(gulpif(!IS_DEV, minifyCss()))
+    .pipe(gulpif(!IS_DEV, util.dedupeCss()))
+    .pipe(rename({extname: '.min.css'}))
+    .pipe(gulp.dest(dest))                        // minified
   );
 
   streams.push(
-      gulp.src(config.cssIEPaths.slice())         // append raw CSS for IE Fixes
-        .pipe(concat('angular-material.layouts.ie_fixes.css'))
-        .pipe(gulp.dest(layoutDest))
+    gulp.src(config.cssIEPaths.slice())         // append raw CSS for IE Fixes
+    .pipe(concat('angular-material.layouts.ie_fixes.css'))
+    .pipe(gulp.dest(layoutDest))
   );
 
   // Generate standalone SCSS (and CSS) file for Layouts API
   // The use of these classnames is automated but requires
-  // the Javascript module module `material.core.layout`
+  // the Javascript module `material.core.layout`
   //  > (see src/core/services/layout.js)
   // NOTE: this generated css is ALSO appended to the published
   //       angular-material.css file
 
   streams.push(
     gulp.src(config.scssLayoutFiles)
-        .pipe(concat('angular-material.layouts.scss'))
-        .pipe(sassUtils.hoistScssVariables())
-        .pipe(insert.prepend(config.banner))
-        .pipe(gulp.dest(layoutDest))      // raw uncompiled SCSS
-        .pipe(sass())
-        .pipe(util.dedupeCss())
-        .pipe(util.autoprefix())
-        .pipe(rename({ extname : '.css'}))
-        .pipe(gulp.dest(layoutDest))
-        .pipe(gulpif(!IS_DEV, minifyCss()))
-        .pipe(gulpif(!IS_DEV, util.dedupeCss()))
-        .pipe(rename({extname: '.min.css'}))
-        .pipe(gulp.dest(layoutDest))
+    .pipe(concat('angular-material.layouts.scss'))
+    .pipe(sassUtils.hoistScssVariables())
+    .pipe(insert.prepend(config.banner))
+    .pipe(gulp.dest(layoutDest))      // raw uncompiled SCSS
+    .pipe(sass())
+    .pipe(util.dedupeCss())
+    .pipe(util.autoprefix())
+    .pipe(rename({extname: '.css'}))
+    .pipe(gulp.dest(layoutDest))
+    .pipe(gulpif(!IS_DEV, minifyCss()))
+    .pipe(gulpif(!IS_DEV, util.dedupeCss()))
+    .pipe(rename({extname: '.min.css'}))
+    .pipe(gulp.dest(layoutDest))
   );
 
   // Generate the Layout-Attributes SCSS and CSS files
   // These are intended to allow usages of the Layout styles
   // without:
   //  * use of the Layout directives and classnames, and
-  //  * Layout module `material.core.layout
+  //  * Layout module `material.core.layout`
 
   streams.push(
-      gulp.src(config.scssLayoutAttributeFiles)
-          .pipe(concat('angular-material.layout-attributes.scss'))
-          .pipe(sassUtils.hoistScssVariables())
-          .pipe(gulp.dest(layoutDest))     // raw uncompiled SCSS
-          .pipe(sass())
-          .pipe(util.dedupeCss())
-          .pipe(util.autoprefix())
-          .pipe(rename({ extname : '.css'}))
-          .pipe(insert.prepend(config.banner))
-          .pipe(gulp.dest(layoutDest))
-          .pipe(gulpif(!IS_DEV, minifyCss()))
-          .pipe(gulpif(!IS_DEV, util.dedupeCss()))
-          .pipe(rename({extname: '.min.css'}))
-          .pipe(gulp.dest(layoutDest))
+    gulp.src(config.scssLayoutAttributeFiles)
+    .pipe(concat('angular-material.layout-attributes.scss'))
+    .pipe(sassUtils.hoistScssVariables())
+    .pipe(gulp.dest(layoutDest))     // raw uncompiled SCSS
+    .pipe(sass())
+    .pipe(util.dedupeCss())
+    .pipe(util.autoprefix())
+    .pipe(rename({extname: '.css'}))
+    .pipe(insert.prepend(config.banner))
+    .pipe(gulp.dest(layoutDest))
+    .pipe(gulpif(!IS_DEV, minifyCss()))
+    .pipe(gulpif(!IS_DEV, util.dedupeCss()))
+    .pipe(rename({extname: '.min.css'}))
+    .pipe(gulp.dest(layoutDest))
   );
 
   return series(streams);
 
-
-  function getPaths () {
-    const paths = config.scssBaseFiles.slice();
+  /**
+   * @returns {string[]} array of SCSS file paths used in the build
+   */
+  function getPaths() {
+    const paths = config.scssBaseFiles.slice(0);
     if (modules) {
-      paths.push.apply(paths, modules.split(',').map(function (module) {
+      paths.push.apply(paths, modules.split(',').map(function(module) {
         return 'src/components/' + module + '/*.scss';
       }));
     } else {
-      paths.push('src/components/**/*.scss');
-      paths.push('src/core/services/layout/**/*.scss');
+      config.scssComponentPaths.forEach(component => paths.push(path.join(component, '*.scss')));
+      paths.push(config.scssServicesLayout);
     }
     overrides && paths.unshift(overrides);
     return paths;

gulp/tasks/jshint.js

@@ -3,7 +3,7 @@ const gulp = require('gulp');
 const jshint = require('gulp-jshint');
 
 exports.task = function() {
-  return gulp.src(config.jsFiles)
+  return gulp.src(config.jsHintFiles)
       .pipe(jshint('.jshintrc'))
       .pipe(jshint.reporter('jshint-summary', {
         fileColCol: ',bold',