chore: use gulp-connect as webserver (#2409)

* No longer rebuilds all components when changes have been recognized in the dev-app.
* Allows us to only reload when gulp already recognized a change (no need for filtering and extra watchers)
* No longer injects CSS as the previous live-server (injecting CSS does not work for Angular 2)

Author: devversion

package.json

@@ -67,11 +67,11 @@
     "gulp-clean": "^0.3.2",
     "gulp-clean-css": "^2.3.0",
     "gulp-cli": "^1.2.2",
+    "gulp-connect": "^5.0.0",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
     "gulp-sass": "^2.3.2",
-    "gulp-server-livereload": "^1.8.2",
     "gulp-shell": "^0.5.2",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-transform": "^1.1.0",

tools/gulp/task_helpers.ts

@@ -12,9 +12,9 @@ const gulpClean = require('gulp-clean');
 const gulpMerge = require('merge2');
 const gulpRunSequence = require('run-sequence');
 const gulpSass = require('gulp-sass');
-const gulpServer = require('gulp-server-livereload');
 const gulpSourcemaps = require('gulp-sourcemaps');
 const gulpAutoprefixer = require('gulp-autoprefixer');
+const gulpConnect = require('gulp-connect');
 const resolveBin = require('resolve-bin');
 
 
@@ -167,7 +167,8 @@ export function buildAppTask(appName: string) {
   return (done: () => void) => {
     gulpRunSequence(
       'clean',
-      ['build:components', ...buildTasks],
+      'build:components',
+      [...buildTasks],
       done
     );
   };
@@ -183,29 +184,23 @@ export function vendorTask() {
     }));
 }
 
-export type livereloadOptions = boolean | {
-  enable: boolean;
-  filter: (filename: string, callback: (isAllowed: boolean) => void) => void;
-}
-
 /** Create a task that serves the dist folder. */
-export function serverTask(liveReload: livereloadOptions = true,
-                           streamCallback: (stream: NodeJS.ReadWriteStream) => void = null) {
-
+export function serverTask(livereload = true) {
   return () => {
-    const stream = gulp.src('dist').pipe(gulpServer({
-      livereload: liveReload,
-      fallback: 'index.html',
-      port: 4200
-    }));
-
-    if (streamCallback) {
-      streamCallback(stream);
-    }
-    return stream;
+    gulpConnect.server({
+      root: 'dist/',
+      livereload: livereload,
+      port: 4200,
+      fallback: 'dist/index.html'
+    });
   };
 }
 
+/** Triggers a reload when livereload is enabled and a gulp-connect server is running. */
+export function triggerLivereload() {
+  gulp.src('dist').pipe(gulpConnect.reload());
+}
+
 
 /** Create a task that's a sequence of other tasks. */
 export function sequenceTask(...args: any[]) {

tools/gulp/tasks/components.ts

@@ -4,7 +4,10 @@ import * as path from 'path';
 import {
   DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS, LICENSE_BANNER
 } from '../constants';
-import {sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask} from '../task_helpers';
+import {
+  sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask,
+  triggerLivereload
+} from '../task_helpers';
 
 // No typings for these.
 const inlineResources = require('../../../scripts/release/inline-resources');
@@ -27,9 +30,9 @@ const tsconfigPath = path.relative(PROJECT_ROOT, path.join(COMPONENTS_DIR, 'tsco
 
 /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */
 task(':watch:components', () => {
-  watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components']);
-  watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components']);
-  watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components']);
+  watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]);
+  watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]);
+  watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]);
 });
 
 

tools/gulp/tasks/development.ts

@@ -4,37 +4,27 @@ import * as path from 'path';
 import {DIST_ROOT, SOURCE_ROOT} from '../constants';
 import {
   sassBuildTask, tsBuildTask, copyTask, buildAppTask, vendorTask,
-  serverTask, sequenceTask
+  serverTask, sequenceTask, triggerLivereload
 } from '../task_helpers';
 
 
 const appDir = path.join(SOURCE_ROOT, 'demo-app');
 const outDir = DIST_ROOT;
-const LIVERELOAD_PATTERNS = [
-  /material\.umd\.js$/,
-  /-demo\.[a-z]+$/,
-  /\/theming\/prebuilt/
-];
 
 task(':watch:devapp', () => {
-  watch(path.join(appDir, '**/*.ts'), [':build:devapp:ts']);
-  watch(path.join(appDir, '**/*.scss'), [':build:devapp:scss']);
-  watch(path.join(appDir, '**/*.html'), [':build:devapp:assets']);
+  watch(path.join(appDir, '**/*.ts'), [':build:devapp:ts', triggerLivereload]);
+  watch(path.join(appDir, '**/*.scss'), [':build:devapp:scss', triggerLivereload]);
+  watch(path.join(appDir, '**/*.html'), [':build:devapp:assets', triggerLivereload]);
 });
 
 
 task(':build:devapp:vendor', vendorTask());
-task(':build:devapp:ts', ['build:components'], tsBuildTask(appDir));
-task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
+task(':build:devapp:ts', tsBuildTask(appDir));
+task(':build:devapp:scss', sassBuildTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));
 
-task(':serve:devapp', serverTask({
-  enable: true,
-  filter: (filename: string, callback: Function) => {
-    callback(LIVERELOAD_PATTERNS.some(pattern => pattern.test(filename)));
-  }
-}));
+task(':serve:devapp', serverTask(true));
 
 task('serve:devapp', ['build:devapp'], sequenceTask(
   [':serve:devapp', ':watch:components', ':watch:devapp']

tools/gulp/tasks/e2e.ts

@@ -8,14 +8,12 @@ import {
 } from '../task_helpers';
 
 const gulpRunSequence = require('run-sequence');
+const gulpConnect = require('gulp-connect');
 
 const appDir = path.join(SOURCE_ROOT, 'e2e-app');
 const outDir = DIST_ROOT;
 const PROTRACTOR_CONFIG_PATH = path.join(PROJECT_ROOT, 'test/protractor.conf.js');
 
-/** Method to stop a running e2e web server, which may have not exited properly */
-let stopE2eServer = () => {};
-
 task(':watch:e2eapp', () => {
   watch(path.join(appDir, '**/*.ts'), [':build:e2eapp:ts']);
   watch(path.join(appDir, '**/*.html'), [':build:e2eapp:assets']);
@@ -25,10 +23,10 @@ task(':watch:e2eapp', () => {
 task(':build:e2eapp:vendor', vendorTask());
 
 /** Builds e2e app ts to js. */
-task(':build:e2eapp:ts', [':build:components:ts'], tsBuildTask(appDir));
+task(':build:e2eapp:ts', tsBuildTask(appDir));
 
 /** No-op (needed by buildAppTask). */
-task(':build:e2eapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
+task(':build:e2eapp:scss', sassBuildTask(outDir, appDir));
 
 /** Copies e2e app assets (html, css) to build output. */
 task(':build:e2eapp:assets', copyTask(appDir, outDir));
@@ -43,10 +41,10 @@ task(':test:protractor:setup', execNodeTask('protractor', 'webdriver-manager', [
 task(':test:protractor', execNodeTask('protractor', [PROTRACTOR_CONFIG_PATH]));
 
 /** Starts up the e2e app server. */
-task(':serve:e2eapp', serverTask(false, stream => { stopE2eServer = () => stream.emit('kill'); }));
+task(':serve:e2eapp', serverTask(false));
 
 /** Terminates the e2e app server */
-task(':serve:e2eapp:stop', () => stopE2eServer());
+task(':serve:e2eapp:stop', gulpConnect.serverClose);
 
 /** Builds and serves the e2e app. */
 task('serve:e2eapp', sequenceTask('build:components', 'build:e2eapp', ':serve:e2eapp'));
@@ -68,7 +66,7 @@ task('e2e', (done: (err?: string) => void) => {
     'serve:e2eapp:watch',
     ':test:protractor',
     ':serve:e2eapp:stop',
-    (err: any) => stopE2eServer() && done(err)
+    (err: any) => gulpConnect.serverClose() && done(err)
   );
 });
 
@@ -83,6 +81,6 @@ task('e2e:single-run', (done: (err?: string) => void) => {
     'serve:e2eapp',
     ':test:protractor',
     ':serve:e2eapp:stop',
-    (err: any) => stopE2eServer() && done(err)
+    (err: any) => gulpConnect.serverClose() && done(err)
   );
 });