build: move packaging out of gulp folder (#5063)

gulpfile.js

@@ -6,9 +6,20 @@
 
 const path = require('path');
 
+const tsconfigPath = path.join(__dirname, 'tools/gulp/tsconfig.json');
+const tsconfig = require(tsconfigPath);
+
 // Register TS compilation.
 require('ts-node').register({
-  project: path.join(__dirname, 'tools/gulp/tsconfig.json')
+  project: tsconfigPath
+});
+
+// The gulp tsconfig file maps specific imports to relative paths. In combination with ts-node
+// this doesn't work because the JavaScript output will still refer to the imports instead of
+// to the relative path. Tsconfig-paths can be used to support path mapping inside of Node.
+require("tsconfig-paths").register({
+  baseUrl: path.dirname(tsconfigPath),
+  paths: tsconfig.compilerOptions.paths
 });
 
 require('./tools/gulp/gulpfile');

tools/gulp/gulpfile.ts

@@ -1,4 +1,4 @@
-import {createPackageBuildTasks} from './packaging/build-tasks-gulp';
+import {createPackageBuildTasks} from 'material2-build-tools';
 
 // Create gulp tasks to build the different packages in the project.
 createPackageBuildTasks('cdk');

tools/gulp/tasks/aot.ts

@@ -1,8 +1,8 @@
 import {task} from 'gulp';
 import {copySync} from 'fs-extra';
-import {sequenceTask, execNodeTask} from '../util/task_helpers';
+import {execNodeTask} from '../util/task_helpers';
 import {join} from 'path';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig, sequenceTask} from 'material2-build-tools';
 
 const {outputDir} = buildConfig;
 

tools/gulp/tasks/clean.ts

@@ -1,6 +1,6 @@
 import {task} from 'gulp';
 import {cleanTask} from '../util/task_helpers';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig} from 'material2-build-tools';
 
 
 /** Deletes the dist/ directory. */

tools/gulp/tasks/coverage.ts

@@ -4,7 +4,7 @@ import {existsSync} from 'fs-extra';
 import {spawnSync} from 'child_process';
 import {isTravisMasterBuild} from '../util/travis-ci';
 import {openFirebaseDashboardApp} from '../util/firebase';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig} from 'material2-build-tools';
 
 /** Path to the file that includes all coverage information form Karma. */
 const coverageResultFile = join(buildConfig.outputDir, 'coverage/coverage-summary.json');

tools/gulp/tasks/development.ts

@@ -1,11 +1,9 @@
 import {task, watch} from 'gulp';
-import {
-  sassBuildTask, tsBuildTask, copyTask, buildAppTask, sequenceTask, triggerLivereload,
-  serverTask
-} from '../util/task_helpers';
+import {tsBuildTask, copyTask, buildAppTask, serverTask} from '../util/task_helpers';
 import {join} from 'path';
-import {copyFiles} from '../util/copy-files';
-import {buildConfig} from '../packaging/build-config';
+import {
+  buildConfig, copyFiles, buildScssTask, triggerLivereload, sequenceTask
+} from 'material2-build-tools';
 
 // These imports don't have any typings provided.
 const firebaseTools = require('firebase-tools');
@@ -44,7 +42,7 @@ task(':watch:devapp', () => {
 const tsconfigPath = join(appDir, 'tsconfig-build.json');
 
 task(':build:devapp:ts', tsBuildTask(tsconfigPath));
-task(':build:devapp:scss', sassBuildTask(outDir, appDir));
+task(':build:devapp:scss', buildScssTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));
 

tools/gulp/tasks/docs.ts

@@ -1,7 +1,7 @@
 import {task, src, dest} from 'gulp';
 import {Dgeni} from 'dgeni';
 import * as path from 'path';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig} from 'material2-build-tools';
 
 // There are no type definitions available for these imports.
 const markdown = require('gulp-markdown');

tools/gulp/tasks/e2e.ts

@@ -1,8 +1,8 @@
 import {task, watch} from 'gulp';
 import {join} from 'path';
-import {ngcBuildTask, copyTask, execNodeTask, sequenceTask, serverTask} from '../util/task_helpers';
+import {ngcBuildTask, copyTask, execNodeTask, serverTask} from '../util/task_helpers';
 import {copySync} from 'fs-extra';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig, sequenceTask} from 'material2-build-tools';
 
 // There are no type definitions available for these imports.
 const gulpConnect = require('gulp-connect');

tools/gulp/tasks/lint.ts

@@ -1,7 +1,7 @@
 import {task} from 'gulp';
 import {execNodeTask} from '../util/task_helpers';
 import {join} from 'path';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig} from 'material2-build-tools';
 
 /** Glob that matches all SCSS or CSS files that should be linted. */
 const stylesGlob = '+(tools|src)/**/*.+(css|scss)';

tools/gulp/tasks/material-release.ts

@@ -2,9 +2,7 @@ import {task, src, dest} from 'gulp';
 import {join} from 'path';
 import {writeFileSync, mkdirpSync} from 'fs-extra';
 import {Bundler} from 'scss-bundle';
-import {sequenceTask} from '../util/task_helpers';
-import {composeRelease} from '../packaging/build-release';
-import {buildConfig} from '../packaging/build-config';
+import {composeRelease, buildConfig, sequenceTask} from 'material2-build-tools';
 
 // There are no type definitions available for these imports.
 const gulpRename = require('gulp-rename');

tools/gulp/tasks/payload.ts

@@ -2,7 +2,7 @@ import {task} from 'gulp';
 import {join} from 'path';
 import {statSync} from 'fs';
 import {isTravisBuild, isTravisMasterBuild} from '../util/travis-ci';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig} from 'material2-build-tools';
 import {openFirebaseDashboardApp, openFirebaseDashboardAppAsGuest} from '../util/firebase';
 import {spawnSync} from 'child_process';
 import * as firebaseAdmin from 'firebase-admin';

tools/gulp/tasks/publish.ts

@@ -2,8 +2,8 @@ import {spawn} from 'child_process';
 import {existsSync, statSync} from 'fs-extra';
 import {join} from 'path';
 import {task} from 'gulp';
-import {execTask, sequenceTask} from '../util/task_helpers';
-import {buildConfig} from '../packaging/build-config';
+import {execTask} from '../util/task_helpers';
+import {buildConfig, sequenceTask} from 'material2-build-tools';
 import {yellow, green, red, grey} from 'chalk';
 import * as minimist from 'minimist';
 

tools/gulp/tasks/unit-test.ts

@@ -1,7 +1,6 @@
 import {join} from 'path';
 import {task, watch} from 'gulp';
-import {sequenceTask} from '../util/task_helpers';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig, sequenceTask} from 'material2-build-tools';
 
 // There are no type definitions available for these imports.
 const runSequence = require('run-sequence');

tools/gulp/tasks/universal.ts

@@ -1,8 +1,8 @@
 import {task} from 'gulp';
-import {ngcBuildTask, tsBuildTask, copyTask, sequenceTask, execTask} from '../util/task_helpers';
+import {ngcBuildTask, tsBuildTask, copyTask, execTask} from '../util/task_helpers';
 import {join} from 'path';
 import {copySync} from 'fs-extra';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig, sequenceTask} from 'material2-build-tools';
 
 const {outputDir, packagesDir} = buildConfig;
 

tools/gulp/tasks/validate-release.ts

@@ -2,10 +2,9 @@ import {task} from 'gulp';
 import {readFileSync, existsSync} from 'fs';
 import {join} from 'path';
 import {green, red} from 'chalk';
-import {sequenceTask} from '../util/task_helpers';
 import {releasePackages} from './publish';
 import {sync as glob} from 'glob';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig, sequenceTask} from 'material2-build-tools';
 
 /** Path to the directory where all releases are created. */
 const releasesDir = join(buildConfig.outputDir, 'releases');

tools/gulp/tsconfig.json

@@ -1,5 +1,3 @@
-// TypeScript config file that will be used to compile the gulp tasks. The normal gulpfile will
-// use TS-Node to compile the gulp tasks at runtime.
 {
   "compilerOptions": {
     "experimentalDecorators": true,
@@ -13,7 +11,11 @@
     "target": "es5",
     "types": [
       "node"
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "material2-build-tools": ["../package-tools/index"]
+    }
   },
   "files": [
     "gulpfile.ts"

tools/gulp/util/task_helpers.ts

@@ -2,16 +2,12 @@ import * as child_process from 'child_process';
 import * as fs from 'fs';
 import * as gulp from 'gulp';
 import * as path from 'path';
-import {yellow} from 'chalk';
-import {buildConfig} from '../packaging/build-config';
+import {buildConfig} from 'material2-build-tools';
 
 /* Those imports lack typings. */
 const gulpClean = require('gulp-clean');
 const gulpRunSequence = require('run-sequence');
-const gulpSass = require('gulp-sass');
 const gulpConnect = require('gulp-connect');
-const gulpIf = require('gulp-if');
-const gulpCleanCss = require('gulp-clean-css');
 
 // There are no type definitions available for these imports.
 const resolveBin = require('resolve-bin');
@@ -44,17 +40,6 @@ export function ngcBuildTask(tsConfigPath: string) {
   return execNodeTask('@angular/compiler-cli', 'ngc', ['-p', tsConfigPath]);
 }
 
-/** Create a SASS Build Task. */
-export function sassBuildTask(dest: string, root: string, minify = false) {
-  return () => {
-    return gulp.src(_globify(root, '**/*.scss'))
-      .pipe(gulpSass().on('error', gulpSass.logError))
-      .pipe(gulpIf(minify, gulpCleanCss()))
-      .pipe(gulp.dest(dest));
-  };
-}
-
-
 /** Options that can be passed to execTask or execNodeTask. */
 export interface ExecTaskOptions {
   // Whether STDOUT and STDERR messages should be printed.
@@ -177,20 +162,3 @@ export function serverTask(packagePath: string, livereload = true) {
     });
   };
 }
-
-/** Triggers a reload when livereload is enabled and a gulp-connect server is running. */
-export function triggerLivereload() {
-  console.log(yellow('Server: Changes were detected and a livereload was triggered.'));
-  return gulp.src('dist').pipe(gulpConnect.reload());
-}
-
-
-/** Create a task that's a sequence of other tasks. */
-export function sequenceTask(...args: any[]) {
-  return (done: any) => {
-    gulpRunSequence(
-      ...args,
-      done
-    );
-  };
-}

tools/package-tools/build-release.ts

@@ -1,5 +1,5 @@
 import {join} from 'path';
-import {copyFiles} from '../util/copy-files';
+import {copyFiles} from './copy-files';
 import {addPureAnnotationsToFile} from './pure-annotations';
 import {updatePackageVersion} from './package-versions';
 import {inlinePackageMetadataFiles} from './metadata-inlining';

tools/package-tools/gulp/build-scss-task.ts

@@ -0,0 +1,17 @@
+import {src, dest} from 'gulp';
+import {join} from 'path';
+
+// These imports lack of type definitions.
+const gulpSass = require('gulp-sass');
+const gulpIf = require('gulp-if');
+const gulpCleanCss = require('gulp-clean-css');
+
+/** Create a gulp task that builds SCSS files. */
+export function buildScssTask(outputDir: string, sourceDir: string, minifyOutput = false) {
+  return () => {
+    return src(join(sourceDir, '**/*.scss'))
+      .pipe(gulpSass().on('error', gulpSass.logError))
+      .pipe(gulpIf(minifyOutput, gulpCleanCss()))
+      .pipe(dest(outputDir));
+  };
+}

tools/package-tools/gulp/build-tasks-gulp.ts

@@ -1,11 +1,13 @@
 import {task, watch, src, dest} from 'gulp';
 import {join} from 'path';
 import {main as tsc} from '@angular/tsc-wrapped';
-import {buildConfig} from './build-config';
-import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
-import {composeRelease} from './build-release';
-import {buildPackageBundles} from './build-bundles';
-import {inlineResourcesForDirectory} from './inline-resources';
+import {buildConfig} from '../build-config';
+import {composeRelease} from '../build-release';
+import {buildPackageBundles} from '../build-bundles';
+import {inlineResourcesForDirectory} from '../inline-resources';
+import {buildScssTask} from './build-scss-task';
+import {sequenceTask} from './sequence-task';
+import {triggerLivereload} from './trigger-livereload';
 
 // There are no type definitions available for these imports.
 const htmlmin = require('gulp-htmlmin');
@@ -87,8 +89,10 @@ export function createPackageBuildTasks(packageName: string, requiredPackages: s
     `${packageName}:assets:scss`, `${packageName}:assets:copy-styles`, `${packageName}:assets:html`
   ]);
 
-  task(`${packageName}:assets:scss`, sassBuildTask(packageOut, packageRoot, true));
-  task(`${packageName}:assets:copy-styles`, copyTask(stylesGlob, packageOut));
+  task(`${packageName}:assets:scss`, buildScssTask(packageOut, packageRoot, true));
+  task(`${packageName}:assets:copy-styles`, () => {
+    return src(stylesGlob).pipe(dest(packageOut));
+  });
   task(`${packageName}:assets:html`, () => {
     return src(htmlGlob).pipe(htmlmin(htmlMinifierOptions)).pipe(dest(packageOut));
   });

tools/package-tools/gulp/sequence-task.ts

@@ -0,0 +1,12 @@
+// This import does not have any type definitions.
+const gulpRunSequence = require('run-sequence');
+
+/** Create a task that's a sequence of other tasks. */
+export function sequenceTask(...args: any[]) {
+  return (done: any) => {
+    gulpRunSequence(
+      ...args,
+      done
+    );
+  };
+}

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

@@ -0,0 +1,11 @@
+import {yellow} from 'chalk';
+import {src} from 'gulp';
+
+// This import does not have any type definitions.
+const gulpConnect = require('gulp-connect');
+
+/** Triggers a reload when livereload is enabled and a gulp-connect server is running. */
+export function triggerLivereload() {
+  console.log(yellow('Server: Changes were detected and a livereload was triggered.'));
+  return src('dist').pipe(gulpConnect.reload());
+}

tools/package-tools/index.ts

@@ -0,0 +1,11 @@
+// Expose general package utilities.
+export * from './build-config';
+export * from './build-bundles';
+export * from './build-release';
+export * from './copy-files';
+
+// Expose gulp utilities.
+export * from './gulp/build-tasks-gulp';
+export * from './gulp/build-scss-task';
+export * from './gulp/sequence-task';
+export * from './gulp/trigger-livereload';