build: switch to browser-sync (#14295)

Switches the gulp-connect dev-server to browser-sync

Author: devversion

package.json

@@ -60,6 +60,7 @@
     "@google-cloud/storage": "^1.1.1",
     "@octokit/rest": "^15.9.4",
     "@schematics/angular": "^7.0.6",
+    "@types/browser-sync": "^0.0.42",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.3",
     "@types/glob": "^5.0.33",
@@ -76,6 +77,7 @@
     "@types/run-sequence": "^0.0.29",
     "autoprefixer": "^6.7.6",
     "axe-webdriverjs": "^1.1.1",
+    "browser-sync": "^2.26.3",
     "chalk": "^1.1.3",
     "codelyzer": "^4.5.0",
     "conventional-changelog": "^3.0.5",
@@ -90,7 +92,6 @@
     "gulp-clean": "^0.3.2",
     "gulp-clean-css": "^3.3.1",
     "gulp-cli": "^2.0.1",
-    "gulp-connect": "^5.0.0",
     "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
     "gulp-highlight-files": "^0.0.5",

tools/gulp/tasks/development.ts

@@ -7,7 +7,6 @@ import {
   copyFiles,
   inlineResourcesForDirectory,
   sequenceTask,
-  watchFiles,
 } from 'material2-build-tools';
 import {
   cdkPackage,
@@ -17,6 +16,7 @@ import {
   momentAdapterPackage,
   examplesPackage,
 } from '../packages';
+import {watchFilesAndReload} from '../util/watch-files-reload';
 
 // These imports don't have any typings provided.
 const firebaseTools = require('firebase-tools');
@@ -56,7 +56,7 @@ task(':build:devapp:assets', copyTask(assetsGlob, outDir));
 task(':build:devapp:scss', () => buildScssPipeline(appDir).pipe(dest(outDir)));
 task(':build:devapp:inline-resources', () => inlineResourcesForDirectory(outDir));
 
-task(':serve:devapp', serverTask(outDir, true));
+task(':serve:devapp', serverTask(outDir));
 
 task('build:devapp', sequenceTask(
   'cdk:build-no-bundles',
@@ -123,40 +123,41 @@ task('deploy:devapp', ['stage-deploy:devapp'], () => {
  */
 
 task(':watch:devapp', () => {
-  watchFiles(join(appDir, '**/*.ts'), [':build:devapp:ts']);
-  watchFiles(join(appDir, '**/*.scss'), [':watch:devapp:rebuild-scss']);
-  watchFiles(join(appDir, '**/*.html'), [':watch:devapp:rebuild-html']);
+  watchFilesAndReload(join(appDir, '**/*.ts'), [':build:devapp:ts']);
+  watchFilesAndReload(join(appDir, '**/*.scss'), [':watch:devapp:rebuild-scss']);
+  watchFilesAndReload(join(appDir, '**/*.html'), [':watch:devapp:rebuild-html']);
 
   // Custom watchers for all packages that are used inside of the dev-app. This is necessary
   // because we only want to build the changed package (using the build-no-bundles task).
 
   // CDK package watchers.
-  watchFiles(join(cdkPackage.sourceDir, '**/*'), ['cdk:build-no-bundles']);
+  watchFilesAndReload(join(cdkPackage.sourceDir, '**/*'), ['cdk:build-no-bundles']);
 
   const materialCoreThemingGlob = join(materialPackage.sourceDir, '**/core/theming/**/*.scss');
 
   // Material package watchers.
-  watchFiles([
+  watchFilesAndReload([
     join(materialPackage.sourceDir, '**/!(*-theme.scss)'), `!${materialCoreThemingGlob}`
   ], ['material:build-no-bundles']);
-  watchFiles([
+  watchFilesAndReload([
     join(materialPackage.sourceDir, '**/*-theme.scss'), materialCoreThemingGlob
   ], [':build:devapp:scss']);
 
   // Moment adapter package watchers
-  watchFiles(join(momentAdapterPackage.sourceDir, '**/*'),
+  watchFilesAndReload(join(momentAdapterPackage.sourceDir, '**/*'),
     ['material-moment-adapter:build-no-bundles']);
 
   // Material experimental package watchers
-  watchFiles(join(materialExperimentalPackage.sourceDir, '**/*'),
+  watchFilesAndReload(join(materialExperimentalPackage.sourceDir, '**/*'),
     ['material-experimental:build-no-bundles']);
 
   // CDK experimental package watchers
-  watchFiles(join(cdkExperimentalPackage.sourceDir, '**/*'),
+  watchFilesAndReload(join(cdkExperimentalPackage.sourceDir, '**/*'),
     ['cdk-experimental:build-no-bundles']);
 
   // Example package watchers.
-  watchFiles(join(examplesPackage.sourceDir, '**/*'), ['material-examples:build-no-bundles']);
+  watchFilesAndReload(join(examplesPackage.sourceDir, '**/*'),
+    ['material-examples:build-no-bundles']);
 });
 
 // Note that we need to rebuild the TS here, because the resource inlining

tools/gulp/tasks/e2e.ts

@@ -1,10 +1,13 @@
 import {task} from 'gulp';
-import {buildConfig, sequenceTask, triggerLivereload, watchFiles} from 'material2-build-tools';
+import {buildConfig, sequenceTask, watchFiles} from 'material2-build-tools';
 import {join} from 'path';
-import {copyTask, execNodeTask, ngcBuildTask, serverTask} from '../util/task_helpers';
-
-// There are no type definitions available for these imports.
-const gulpConnect = require('gulp-connect');
+import {
+  copyTask,
+  execNodeTask,
+  getActiveBrowserSyncInstance,
+  ngcBuildTask,
+  serverTask
+} from '../util/task_helpers';
 
 const {outputDir, packagesDir, projectDir} = buildConfig;
 
@@ -39,7 +42,7 @@ task('e2e:watch', sequenceTask(
 /** Watches the e2e app and tests for changes and triggers a test rerun on change. */
 task(':e2e:watch', () => {
   watchFiles([join(appDir, '**/*.+(html|ts|css)'), join(e2eTestDir, '**/*.+(html|ts)')],
-      [':e2e:rerun'], false);
+      [':e2e:rerun']);
 });
 
 /** Updates the e2e app and runs the protractor tests. */
@@ -52,7 +55,7 @@ task(':e2e:rerun', sequenceTask(
 
 /** Triggers a reload of the e2e app. */
 task(':e2e:reload', () => {
-  return triggerLivereload();
+  return getActiveBrowserSyncInstance().reload();
 });
 
 /** Task that builds the e2e-app in AOT mode. */
@@ -76,8 +79,8 @@ task('e2e-app:copy-index-html', copyTask(join(appDir, 'index.html'), outDir));
 task('e2e-app:build-ts', ngcBuildTask(tsconfigPath));
 
 task(':watch:e2eapp', () => {
-  watchFiles(join(appDir, '**/*.ts'), ['e2e-app:build'], false);
-  watchFiles(join(appDir, '**/*.html'), ['e2e-app:copy-assets'], false);
+  watchFiles(join(appDir, '**/*.ts'), ['e2e-app:build']);
+  watchFiles(join(appDir, '**/*.html'), ['e2e-app:copy-assets']);
 });
 
 /** Ensures that protractor and webdriver are set up to run. */
@@ -90,7 +93,7 @@ task(':test:protractor:setup', execNodeTask(
 task(':test:protractor', execNodeTask('protractor', [PROTRACTOR_CONFIG_PATH]));
 
 /** Starts up the e2e app server and rewrites the HTTP requests to properly work with AOT. */
-task(':serve:e2eapp', serverTask(outDir, false, [
+task(':serve:e2eapp', serverTask(outDir, [
   // Rewrite each request for .ngfactory files which are outside of the e2e-app to the **actual**
   // path. This is necessary because NGC cannot generate factory files for the node modules
   // and release output. If we work around it by adding multiple root directories, the directory
@@ -108,7 +111,7 @@ task(':serve:e2eapp', serverTask(outDir, false, [
 ]));
 
 /** Terminates the e2e app server */
-task(':serve:e2eapp:stop', gulpConnect.serverClose);
+task(':serve:e2eapp:stop', () => getActiveBrowserSyncInstance().exit());
 
 /** Builds and serves the e2e app. */
 task('serve:e2eapp', sequenceTask('e2e-app:build', ':serve:e2eapp'));

tools/gulp/util/task_helpers.ts

@@ -1,19 +1,22 @@
+import {BrowserSyncInstance, create as createBrowserSyncInstance} from 'browser-sync';
 import * as child_process from 'child_process';
 import * as fs from 'fs';
 import * as gulp from 'gulp';
-import * as path from 'path';
 import {buildConfig} from 'material2-build-tools';
+import * as path from 'path';
 
-// Those imports lack typings.
+// This import lacks type definitions.
 const gulpClean = require('gulp-clean');
-const gulpConnect = require('gulp-connect');
 
 // There are no type definitions available for these imports.
 const resolveBin = require('resolve-bin');
 const httpRewrite = require('http-rewrite-middleware');
 
 const {projectDir} = buildConfig;
 
+/** Currently active browsersync instance. */
+let activeBrowserSyncInstance: BrowserSyncInstance;
+
 /** If the string passed in is a glob, returns it, otherwise append '**\/*' to it. */
 function _globify(maybeGlob: string, suffix = '**/*') {
   if (maybeGlob.indexOf('*') > -1) {
@@ -125,9 +128,7 @@ export function cleanTask(glob: string) {
  * Create a task that serves a given directory in the project.
  * The server rewrites all node_module/ or dist/ requests to the correct directory.
  */
-export function serverTask(packagePath: string, livereload = true,
-                           rewrites?: {from: string, to: string}[]) {
-
+export function serverTask(packagePath: string, rewrites?: {from: string, to: string}[]) {
   // The http-rewrite-middleware only supports relative paths as rewrite destinations.
   const relativePath = path.relative(projectDir, packagePath);
   const defaultHttpRewrites = [
@@ -143,14 +144,24 @@ export function serverTask(packagePath: string, livereload = true,
   ];
 
   return () => {
-    gulpConnect.server({
-      root: projectDir,
-      livereload: livereload,
+    if (activeBrowserSyncInstance) {
+      throw new Error('Cannot setup BrowserSync because there is already an instance running.');
+    }
+
+    activeBrowserSyncInstance = createBrowserSyncInstance();
+    activeBrowserSyncInstance.init({
+      server: projectDir,
       port: 4200,
-      host: '0.0.0.0',
-      middleware: () => {
-        return [httpRewrite.getMiddleware(rewrites || defaultHttpRewrites)];
-      }
+      middleware: httpRewrite.getMiddleware(rewrites || defaultHttpRewrites),
     });
   };
 }
+
+/** Gets the currently active browsersync instance */
+export function getActiveBrowserSyncInstance(): BrowserSyncInstance {
+  if (!activeBrowserSyncInstance) {
+    throw new Error('Cannot return Browsersync instance because there is no instance running.');
+  }
+
+  return activeBrowserSyncInstance;
+}

tools/gulp/util/watch-files-reload.ts

@@ -0,0 +1,10 @@
+import {watchFiles} from 'material2-build-tools';
+import {getActiveBrowserSyncInstance} from './task_helpers';
+
+/**
+ * Function that watches a set of file globs and runs the specified tasks if a file
+ * changed. Additionally BrowserSync will reload all browsers on file change.
+ */
+export function watchFilesAndReload(fileGlob: string | string[], tasks: string[]) {
+  watchFiles(fileGlob, [...tasks, () => getActiveBrowserSyncInstance().reload()]);
+}

tools/package-tools/gulp/trigger-livereload.ts

@@ -1,11 +1,7 @@
-import {watch} from 'gulp';
-import {triggerLivereload} from './trigger-livereload';
+import {watch, WatchCallback} from 'gulp';
 
-/**
- * Function that watches a set of file globs and runs given Gulp tasks if a given file changes.
- * By default the livereload server will be also called on file change.
- */
-export function watchFiles(fileGlob: string | string[], tasks: string[], livereload = true,
-                            debounceDelay = 700) {
-  watch(fileGlob, {debounceDelay}, [...tasks, () => livereload && triggerLivereload()]);
+/** Function that watches a set of file globs and runs given Gulp tasks if a given file changes. */
+export function watchFiles(fileGlob: string | string[], tasks: (string|WatchCallback)[],
+                           debounceDelay = 700) {
+  watch(fileGlob, {debounceDelay}, tasks);
 }

tools/package-tools/gulp/watch-files.ts

@@ -10,5 +10,4 @@ export * from './inline-resources';
 export * from './gulp/build-tasks-gulp';
 export * from './gulp/build-scss-pipeline';
 export * from './gulp/sequence-task';
-export * from './gulp/trigger-livereload';
 export * from './gulp/watch-files';