Feature/frontend build files cleanup

portal/.babelrc

@@ -3,6 +3,7 @@
     ["@babel/env", {
       "modules": false,
       "useBuiltIns": "usage",
+      "corejs": 2
     }]
   ],
   "plugins": [

portal/development_gulpfile.js

@@ -7,34 +7,25 @@
  * for compiling less file, run specific task to compile each respective portal less file, e.g. gulp --gulpfile less_css_gulpfile.js [task name]
  * Running each compiling task will generate sourcemap for each less to css mappings
  */
-const gulp = require("gulp");
-const concat = require("gulp-concat");
-const rename = require("gulp-rename");
+
+const {series, parallel, watch, src, dest} = require("gulp");
 const sourcemaps = require("gulp-sourcemaps");
 const rootPath = "./";
 const GILPath = rootPath + "/gil/";
 const EPROMSPath = rootPath + "/eproms/";
-const jsPath = rootPath + "static/js";
-const jsSrc = rootPath + "static/js/src";
-const jsDest = rootPath + "static/js/dist";
 const lessPath = rootPath + "static/less";
 const cssPath = rootPath + "static/css";
 const mapPath = rootPath + "static/maps";
-const gutil = require("gulp-util");
-const jshint = require("gulp-jshint");
 const less = require("gulp-less");
-const LessPluginCleanCSS = require("less-plugin-clean-css"),
-    cleancss = new LessPluginCleanCSS({
-        advanced: true
-    });
 const replace = require("replace-in-file");
-const postCSS = require("gulp-clean-css");
 const GIL = "gil";
 const PORTAL = "portal";
 const EPROMS = "eproms";
 const TOPNAV = "topnav";
 const PSATRACKER = "psaTracker";
-const jsMainFiles = [jsSrc];
+const cleancss = require("clean-css");
+
+/*eslint no-console: off */
 
 // fetch command line arguments
 const arg = (argList => {
@@ -61,27 +52,6 @@ const arg = (argList => {
 
 })(process.argv);
 
-//linting JS
-/*
- * note can pass command line argument for a particular js file to lint
- * example: gulp jshint --file './static/js/main.js'
- * alternatively can use eslint, see command line tool:  https://eslint.org/docs/user-guide/getting-started
- */
-gulp.task("jshint", function() {
-    var files = jsMainFiles;
-    if (arg.file) {
-      files = [arg.file];
-    }
-    return gulp.src(files)
-        .pipe(jshint())
-        .pipe(jshint.reporter("jshint-stylish"));
-});
-
-//for development, any change in JS mail files will resulted in scripts task being run
-gulp.task("watchJS", function() {
-    gulp.watch(jsMainFiles, ["jshint"]);
-});
-
 /*
  * a workaround to replace $stdin string automatically added by gulp-less module
  */
@@ -102,101 +72,127 @@ function replaceStd(fileName) {
 /*
  * transforming eproms less to css
  */
-gulp.task("epromsLess", function() {
-    return gulp.src(lessPath + "/" + EPROMS + ".less")
+const epromsLess = function(callback) {
+    console.log("Compiling EPROMS Less...");
+    src(lessPath + "/" + EPROMS + ".less")
         .pipe(sourcemaps.init())
         .pipe(less({
             plugins: [cleancss]
         }))
         .pipe(sourcemaps.write("../../../" + mapPath))
-        .pipe(gulp.dest(EPROMSPath + cssPath));
-});
+        .pipe(dest(EPROMSPath + cssPath));
+    callback();
+};
+exports.epromsLess = series(epromsLess);
 /*
  * transforming portal less to css
  */
-gulp.task("portalLess", function() {
-    gulp.src(lessPath + "/" + PORTAL + ".less")
+const portalLess = function(callback) {
+    console.log("Compiling portal less...");
+    src(lessPath + "/" + PORTAL + ".less")
         .pipe(sourcemaps.init({
             sources: [lessPath + "/" + PORTAL + ".less"]
         }))
         .pipe(less({
             plugins: [cleancss]
         }))
         .pipe(sourcemaps.write("../../"+mapPath)) /* see documentation, https://www.npmjs.com/package/gulp-sourcemaps, to write external source map files, pass a path relative to the destination */
-        .pipe(gulp.dest(cssPath))
+        .pipe(dest(cssPath))
         .on("end", function() {
             replaceStd(PORTAL + ".css.map");
         });
-    return true;
-});
+    callback();
+};
+exports.portalLess = series(portalLess);
+
 /*
  * transforming GIL less to css
  */
-gulp.task("gilLess", () => {
-    gulp.src(lessPath + "/" + GIL + ".less")
+const gilLess = function(callback) {
+    console.log("Compiling GIL less...");
+    src(lessPath + "/" + GIL + ".less")
         .pipe(sourcemaps.init({
             sources: [lessPath + "/" + GIL + ".less"]
         }))
         .pipe(less({
             plugins: [cleancss]
         }))
         .pipe(sourcemaps.write("../../../"+mapPath)) /* note to write external source map files, pass a path relative to the destination */
-        .pipe(gulp.dest(GILPath + cssPath))
+        .pipe(dest(GILPath + cssPath))
         .on("end", function() {
             replaceStd(GIL + ".css.map");
         });
-    return true;
-});
+    callback();
+};
+exports.gilLess = series(gilLess);
+
 /*
- *transforming portal wrapper/top nav less to css
+ * transforming portal wrapper/top nav less to css
  */
-
-gulp.task("topnavLess", function() {
-    gulp.src(lessPath + "/" + TOPNAV + ".less")
+const topnavLess = function(callback) {
+    console.log("Compiling portal wrapper less...");
+    src(lessPath + "/" + TOPNAV + ".less")
         .pipe(sourcemaps.init())
         .pipe(less({
             plugins: [cleancss]
         }))
         .pipe(sourcemaps.write("../../"+mapPath)) /* note to write external source map files, pass a path relative to the destination */
-        .pipe(gulp.dest(cssPath))
+        .pipe(dest(cssPath))
         .on("end", function() {
             replaceStd(TOPNAV + ".css.map");
         });
-    return true;
-});
+    callback();
 
-gulp.task("psaTrackerLess", function() {
-    gulp.src(lessPath + "/" + PSATRACKER + ".less")
+};
+exports.topnavLess = series(topnavLess);
+
+/*
+ * transforming PSA tracker less to css
+ */
+const psaTrackerLess = function(callback) {
+    console.log("Compiling PSA Tracker less...");
+    src(lessPath + "/" + PSATRACKER + ".less")
         .pipe(sourcemaps.init())
         .pipe(less({
             plugins: [cleancss]
         }))
         .pipe(sourcemaps.write("../../"+mapPath)) /* note to write external source map files, pass a path relative to the destination */
-        .pipe(gulp.dest(cssPath))
+        .pipe(dest(cssPath))
         .on("end", function() {
             replaceStd(PSATRACKER + ".css.map");
         });
-    return true;
-});
+    callback();
+};
+exports.psaTrackerLess = series(psaTrackerLess);
+
+/*
+ * the following tasks watch for less file changes and recompile css for each
+ */
+//portal
+const watchPortalLess = () => {
+    watch(lessPath + "/" + PORTAL + ".less", {delay: 200}, portalLess);
+};
+exports.watchPortalLess = series(watchPortalLess);
+
+//eproms
+const watchEpromsLess = () => {
+    watch(lessPath + "/" + EPROMS + ".less", {delay: 200}, epromsLess);
+};
+exports.watchEpromsLess = series(watchEpromsLess);
+
+//GIL
+const watchGILLess = () => {
+    watch(lessPath + "/" + GIL + ".less", {delay: 200}, gilLess);
+};
+exports.watchGILLess = series(watchGILLess);
+
+//portal wrapper
+const watchTopNavLess = () => {
+    watch(lessPath + "/topnav.less", {delay: 200}, topnavLess);
+};
+exports.watchTopNavLess = series(watchTopNavLess);
+
 /*
- * running watch task will update css automatically in vivo
- * useful during development
+ * compile all portal less files 
  */
-gulp.task("watchEproms", function() {
-    gulp.watch(lessPath + "/eproms.less", ["epromsLess"]);
-});
-gulp.task("watchPortal", function() {
-    gulp.watch(lessPath + "/portal.less", ["portalLess"]);
-});
-gulp.task("watchGil", function() {
-    gulp.watch(lessPath + "/gil.less", ["gilLess"]);
-});
-gulp.task("watchTopnav", function() {
-    gulp.watch(lessPath + "/topnav.less", ["topnavLess"]);
-});
-gulp.task("watchPsaTracker", function() {
-    gulp.watch(lessPath + "/" + PSATRACKER + ".less", ["psaTrackerLess"]);
-});
-gulp.task("lessAll", ["epromsLess", "portalLess", "topnavLess", "gilLess", "psaTrackerLess"], function() {
-    console.log("Compiling LESS files completed."); /*eslint no-console: off */
-});
+exports.lessAll = series(parallel(epromsLess, portalLess, topnavLess, gilLess, psaTrackerLess));