1 files changed, 48 insertions, 42 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 08cc34b63..f87958a77 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -14,11 +14,12 @@ 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';
 
-import * as rawStyleConfig from './src/theme/default/legacy';
+import * as rawStyleConfig from './scripts/theme/default/legacy';
 
 dotenv.config();
 
@@ -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 {
@@ -59,28 +62,36 @@ const paths = {
     watch: 'src/**/*.html',
   },
   styles: {
-    src: 'src/styles/main.scss',
+    src: [
+      'src/styles/main.scss',
+      'src/styles/vertical.scss',
+      'src/styles/animations.scss',
+    ],
     dest: 'build/styles',
     watch: 'src/styles/**/*.scss',
   },
-  verticalStyle: {
-    src: 'src/styles/vertical.scss',
-    dest: 'build/styles',
-  },
-  scripts: {
+  javascripts: {
     src: 'src/**/*.js',
     dest: 'build/',
     watch: [
-      // 'packages/**/*.js',
       'src/**/*.js',
+      // 'packages/**/*.js',
+    ],
+  },
+  typescripts: {
+    src: 'src/**/*.ts',
+    dest: 'build/',
+    watch: [
+      'src/**/*.ts',
+      // 'packages/**/*.ts',
     ],
   },
   packages: {
     watch: 'packages/**/*',
     // dest: 'build/',
     // watch: [
-    //   // 'packages/**/*.js',
     //   'src/**/*.js',
+    //   // 'packages/**/*.js',
     // ],
   },
 };
@@ -121,9 +132,9 @@ export function mvSrc() {
       [
         `${paths.src}/*`,
         `${paths.src}/*/**`,
-        `!${paths.scripts.watch[1]}`,
+        `!${paths.javascripts.watch[0]}`,
+        `!${paths.typescripts.watch[0]}`,
         `!${paths.src}/styles/**`,
-        `!${paths.src}/**/*.js`,
       ],
       { since: gulp.lastRun(mvSrc) },
     )
@@ -195,58 +206,52 @@ export function styles() {
     .pipe(connect.reload());
 }
 
-export function verticalStyle() {
+export function processJavascripts() {
   return gulp
-    .src(paths.verticalStyle.src)
-    .pipe(
-      sassVariables(
-        Object.assign(
-          {
-            $env: getTargetEnv,
-          },
-          ...styleConfig,
-        ),
-      ),
-    )
-    .pipe(
-      sass({
-        includePaths: ['./node_modules', '../node_modules'],
-      }).on('error', sass.logError),
+    .src(
+      [
+        paths.javascripts.src,
+      ],
+      { since: gulp.lastRun(processJavascripts) },
     )
     .pipe(
-      gulpIf(
-        !isDevBuild,
-        csso({
-          // Only minify in production to speed up dev builds
-          restructure: false, // Don't restructure CSS, otherwise it will break the styles
-        }),
-      ),
+      babel({
+        comments: false,
+      }),
     )
-    .pipe(gulp.dest(paths.verticalStyle.dest))
+    .pipe(gulpIf(!isDevBuild, uglify())) // Only uglify in production to speed up dev builds
+    .pipe(gulp.dest(paths.javascripts.dest))
     .pipe(connect.reload());
 }
 
-export function scripts() {
+export function processTypescripts() {
   return gulp
-    .src(paths.scripts.src, { since: gulp.lastRun(scripts) })
+    .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());
 }
 
 export function watch() {
   gulp.watch(paths.packages.watch, mvLernaPackages);
   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], mvSrc);
 
-  gulp.watch(paths.scripts.watch, scripts);
+  gulp.watch(paths.javascripts.watch, processJavascripts);
+  gulp.watch(paths.typescripts.watch, processTypescripts);
 }
 
 export function webserver() {
@@ -261,6 +266,7 @@ export function recipes() {
     .src(paths.recipes.src, { since: gulp.lastRun(recipes) })
     .pipe(gulp.dest(paths.recipes.dest));
 }
+
 export function recipeInfo() {
   return gulp
     .src(paths.recipeInfo.src, { since: gulp.lastRun(recipeInfo) })
@@ -270,7 +276,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, recipes, recipeInfo),
 );
 export { build };