Additional build fixes

Author: dhruvit-r

gulp/browserify.js

@@ -22,13 +22,13 @@ const partials = () => {
     }))
     .pipe($.angularTemplatecache('templateCacheHtml.js', {
       module: 'topcoderX',
-      root: 'app',
+      transformUrl: url => url.replace(/^\/+/, '')
     }))
     .pipe(gulp.dest(paths.tmp + '/partials/'))
 }
 gulp.task('partials', partials);
 
-const htmlFn = () => {
+const html = () => {
   return new Promise(async (resolve, reject) => {
     const partialsInjectFile = gulp.src(paths.tmp + '/partials/templateCacheHtml.js', { read: false });
     const partialsInjectOptions = {
@@ -59,25 +59,28 @@ const htmlFn = () => {
       .on('error', reject);
   });
 }
-const html = gulp.series(inject, partials, htmlFn);
-gulp.task('html', html);
+const htmlTask = gulp.series(inject, partials, html);
+gulp.task('html', htmlTask);
 
 const images = () => {
   return gulp.src(paths.src + '/assets/images/**/*')
     .pipe(gulp.dest(paths.dist + '/assets/images/'));
 }
 gulp.task('images', images);
 
-const fonts = () => {
+const fonts = () => new Promise(async (resolve, reject) => {
+  const filter = (await import('gulp-filter')).default;
   return gulp.src([
     "node_modules/bootstrap/dist/fonts/*.{eot,svg,ttf,woff,woff2}",
     "node_modules/footable/css/fonts/*.{eot,svg,ttf,woff,woff2}"
   ])
-    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
+    .pipe(filter('**/*.{eot,svg,ttf,woff,woff2}'))
     .pipe($.flatten())
     .pipe(gulp.dest(paths.dist + '/fonts/'))
-    .pipe(gulp.dest(paths.dist + '/styles/fonts/'));
-}
+    .pipe(gulp.dest(paths.dist + '/styles/fonts/'))
+    .on('finish', resolve)
+    .on('error', reject);
+});
 gulp.task('fonts', fonts);
 
 const fontAwesome = () => {
@@ -92,11 +95,10 @@ const misc = () => {
 }
 gulp.task('misc', misc);
 
-const cleanFn = (done) => {
+const clean = (done) => {
   $.del([paths.dist + '/', paths.tmp + '/', paths.src + '/app/config.js'], done);
 }
-const clean = gulp.series(cleanFn);
-gulp.task('clean', cleanFn);
+gulp.task('clean', clean);
 
 const lint = () => {
   // ESLint ignores files with "node_modules" paths.
@@ -117,7 +119,7 @@ const lint = () => {
 }
 gulp.task('lint', lint);
 
-const build = gulp.series(lint, html, images, fonts, fontAwesome, misc);
+const build = gulp.series(lint, htmlTask, images, fonts, fontAwesome, misc);
 gulp.task('build', build);
 
 module.exports = { clean, build };

gulp/build.js

@@ -0,0 +1,47 @@
+const gulp = require('gulp');
+const { createGulpEsbuild } = require('gulp-esbuild')
+const colors = require('ansi-colors')
+const log = require('fancy-log')
+const fs = require('fs');
+const { styles } = require('./styles');
+
+const gulpEsbuild = createGulpEsbuild({
+  incremental: true,
+  piping: true,
+})
+
+const esbuild = () => {
+  const cssFilePath = gulp.paths.tmp + '/serve/app/bundle.css';
+
+  // Delete file if exists
+  if (fs.existsSync(cssFilePath)) {
+    fs.unlinkSync(cssFilePath);
+  }
+
+  return gulp.src('./src/front/src/index.js')
+    .pipe(gulpEsbuild({
+      outfile: 'bundle.js',
+      bundle: true,
+      minify: process.env.DISABLE_MINIFY !== 'true',
+      sourcemap: true,
+      target: 'es2015',
+      legalComments: 'external',
+      loader: {
+        '.eot': 'file',
+        '.woff': 'file',
+        '.woff2': 'file',
+        '.ttf': 'file',
+        '.svg': 'file',
+        '.css': 'file'
+      }
+    }))
+    .on('error', function (e) {
+      log.error("ESBuild Error", colors.red(e.message));
+    })
+    .pipe(gulp.dest(gulp.paths.tmp + '/serve/app'));
+};
+
+const esbuildTask = gulp.series(styles, esbuild);
+gulp.task('esbuild', esbuildTask);
+
+module.exports = { esbuild: esbuildTask }

gulp/esbuild.js

@@ -1,11 +1,11 @@
 const gulp = require('gulp');
-const { browserify } = require('./browserify');
+const { esbuild } = require('./esbuild');
 
 const paths = gulp.paths;
 
 const $ = require('gulp-load-plugins')();
 
-const injectFn = () => {
+const inject = () => {
   const injectStyles = gulp.src([
     paths.tmp + '/serve/{app,components}/**/*.css',
     '!' + paths.tmp + '/serve/app/vendor.css'
@@ -28,7 +28,7 @@ const injectFn = () => {
     .pipe(gulp.dest(paths.tmp + '/serve'));
 }
 
-const inject = gulp.series(browserify, injectFn);
-gulp.task('inject', inject);
+const injectTask = gulp.series(esbuild, inject);
+gulp.task('inject', injectTask);
 
-module.exports = { inject }
+module.exports = { inject: injectTask }

gulp/inject.js

@@ -4,7 +4,7 @@ const paths = gulp.paths;
 
 const $ = require('gulp-load-plugins')();
 
-const styles = () => {
+const styles = () => new Promise(async (resolve, reject) => {
   var lessOptions = {
     paths: [
       'node_modules',
@@ -30,7 +30,8 @@ const styles = () => {
     addRootSlash: false
   };
 
-  const indexFilter = $.filter('index.less', { restore: true });
+  const filter = (await import('gulp-filter')).default;
+  const indexFilter = filter('index.less', { restore: true });
 
   return gulp.src([
     paths.src + '/app/index.less',
@@ -45,7 +46,9 @@ const styles = () => {
       console.error(err.toString());
       this.emit('end');
     })
-    .pipe(gulp.dest(paths.tmp + '/serve/app/'));
-}
+    .pipe(gulp.dest(paths.tmp + '/serve/app/'))
+    .on('finish', resolve)
+    .on('error', reject);
+});
 
 module.exports = { styles }

gulp/styles.js

@@ -27,7 +27,7 @@ const watchBuildFn = () => {
     paths.src + '/{app,components}/**/*.js',
     paths.src + '/{app,components}/**/*.html',
     'package.json'
-  ], gulp.series(inject, watchBuildFn));
+  ], gulp.series(inject, build));
 }
 const watchBuild = gulp.series(inject, build, watchBuildFn)
 gulp.task('watch:build', watchBuild);