Initial plumbing and conversion of a simple javascript to typescript (#1790)

* initial conversion of a simple script
* Moved some of the 'gulp' and related npm modules from being runtime dependencies to development dependencies.

1 files changed, 45 insertions, 8 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 08cc34b63..1f3c42a3d 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -14,6 +14,7 @@ import sassVariables from 'gulp-sass-variables';
 import { removeSync, outputJson } from 'fs-extra';
 import kebabCase from 'kebab-case';
 import hexRgb from 'hex-rgb';
+import ts from 'gulp-typescript';
 
 import * as buildInfo from 'preval-build-info';
 import config from './package.json';
@@ -29,6 +30,8 @@ const isDevBuild = process.env.NODE_ENV === 'development';
 
 const getTargetEnv = isDevBuild ? 'development' : 'production';
 
+const tsProject = ts.createProject('tsconfig.json');
+
 const styleConfig = Object.keys(rawStyleConfig).map(key => {
   const isHex = /^#[0-9A-F]{6}$/i.test(rawStyleConfig[key]);
   return {
@@ -67,7 +70,7 @@ const paths = {
     src: 'src/styles/vertical.scss',
     dest: 'build/styles',
   },
-  scripts: {
+  javascripts: {
     src: 'src/**/*.js',
     dest: 'build/',
     watch: [
@@ -75,6 +78,14 @@ const paths = {
       'src/**/*.js',
     ],
   },
+  typescripts: {
+    src: 'src/**/*.ts',
+    dest: 'build/',
+    watch: [
+      // 'packages/**/*.ts',
+      'src/**/*.ts',
+    ],
+  },
   packages: {
     watch: 'packages/**/*',
     // dest: 'build/',
@@ -121,9 +132,11 @@ export function mvSrc() {
       [
         `${paths.src}/*`,
         `${paths.src}/*/**`,
-        `!${paths.scripts.watch[1]}`,
+        `!${paths.javascripts.watch[1]}`,
+        `!${paths.typescripts.watch[1]}`,
         `!${paths.src}/styles/**`,
         `!${paths.src}/**/*.js`,
+        `!${paths.src}/**/*.ts`,
       ],
       { since: gulp.lastRun(mvSrc) },
     )
@@ -226,16 +239,39 @@ export function verticalStyle() {
     .pipe(connect.reload());
 }
 
-export function scripts() {
+export function processJavascripts() {
   return gulp
-    .src(paths.scripts.src, { since: gulp.lastRun(scripts) })
+    .src(
+      [
+        paths.javascripts.src,
+      ],
+      { since: gulp.lastRun(processJavascripts) })
+    .pipe(
+      babel({
+        comments: false,
+      }),
+    )
+    .pipe(gulpIf(!isDevBuild, uglify())) // Only uglify in production to speed up dev builds
+    .pipe(gulp.dest(paths.javascripts.dest))
+    .pipe(connect.reload());
+}
+
+export function processTypescripts() {
+  return gulp
+    .src(
+      [
+        paths.typescripts.src,
+      ],
+      { since: gulp.lastRun(processTypescripts) })
+    .pipe(tsProject())
+    .js
     .pipe(
       babel({
         comments: false,
       }),
     )
     .pipe(gulpIf(!isDevBuild, uglify())) // Only uglify in production to speed up dev builds
-    .pipe(gulp.dest(paths.scripts.dest))
+    .pipe(gulp.dest(paths.typescripts.dest))
     .pipe(connect.reload());
 }
 
@@ -244,9 +280,10 @@ export function watch() {
   gulp.watch(paths.styles.watch, styles);
   gulp.watch(paths.verticalStyle.src, verticalStyle);
 
-  gulp.watch([paths.src, `${paths.scripts.src}`, `${paths.styles.src}`], mvSrc);
+  gulp.watch([paths.src, `${paths.javascripts.src}`, `${paths.styles.src}`], mvSrc);
 
-  gulp.watch(paths.scripts.watch, scripts);
+  gulp.watch(paths.javascripts.watch, processJavascripts);
+  gulp.watch(paths.typescripts.watch, processTypescripts);
 }
 
 export function webserver() {
@@ -270,7 +307,7 @@ export function recipeInfo() {
 const build = gulp.series(
   clean,
   gulp.parallel(mvSrc, mvPackageJson, mvLernaPackages, exportBuildInfo),
-  gulp.parallel(html, scripts, styles, verticalStyle, recipes, recipeInfo),
+  gulp.parallel(html, processJavascripts, processTypescripts, styles, verticalStyle, recipes, recipeInfo),
 );
 export { build };