Bm gulp experiments

.gitignore

@@ -31,6 +31,7 @@ beanstalk.cfg
 /session-secret.b64
 /src/encoded/static/coverage
 /src/encoded/static/components/lib/react-infinite
+/src/encoded/static/build
 /src/encoded/static/css/bootstrap.css
 /src/encoded/static/css/responsive.css
 /src/encoded/static/css/style.css

Dockerfile

@@ -80,7 +80,6 @@ RUN poetry install --no-dev -vvv && \
 # Build front-end, remove node_modules when done
 ENV NODE_ENV=production
 RUN npm run build && \
-    npm run build-scss && \
     rm -rf node_modules/ && \
     apt-get remove --purge --auto-remove -y ca-certificates
 

Makefile

@@ -32,7 +32,6 @@ npm-setup-if-needed:  # sets up npm only if not already set up
 npm-setup:  # runs all front-end setup
 	npm ci
 	npm run build | grep -v "node_modules\|\[built\]"
-	npm run build-scss
 	make aws-ip-ranges
 
 moto-setup:  # optional moto setup that must be done separately

gulpfile.js

@@ -4,9 +4,10 @@ const { spawn } = require('child_process');
 const PluginError = require('plugin-error');
 const log = require('fancy-log');
 const webpack = require('webpack');
-const sass = require('sass');
 const fs = require('fs');
 
+const { getLinkedSharedComponentsPath } = require('./jsbuild-utils.js');
+
 function setProduction(done) {
     process.env.NODE_ENV = 'production';
     done();
@@ -22,41 +23,6 @@ function setDevelopment(done) {
     done();
 }
 
-function cleanBuildDirectory(done) {
-    const buildDir = './src/encoded/static/build/';
-    const pathsToDelete = [];
-    fs.readdir(buildDir, function (err, files) {
-        files.forEach(function (fileName) {
-            if (fileName === '.gitignore') {
-                // Skip
-                return;
-            }
-            const filePath = path.resolve(buildDir, fileName);
-            pathsToDelete.push(filePath);
-        });
-
-        const filesToDeleteLen = pathsToDelete.length;
-
-        if (filesToDeleteLen === 0) {
-            done();
-            return;
-        }
-
-        var countDeleted = 0;
-        pathsToDelete.forEach(function (filePath) {
-            fs.unlink(filePath, function (err) {
-                countDeleted++;
-                if (countDeleted === filesToDeleteLen) {
-                    console.log(
-                        'Cleaned ' + countDeleted + ' files from ' + buildDir
-                    );
-                    done();
-                }
-            });
-        });
-    });
-}
-
 function webpackOnBuild(done) {
     const start = Date.now();
     return function (err, stats) {
@@ -87,31 +53,6 @@ function watch(done) {
     webpack(webpackConfig).watch(300, webpackOnBuild());
 }
 
-function getLinkedSharedComponentsPath() {
-    let sharedComponentPath = path.resolve(
-        __dirname,
-        'node_modules/@hms-dbmi-bgm/shared-portal-components'
-    );
-    const origPath = sharedComponentPath;
-
-    // Follow any symlinks to get to real path.
-    sharedComponentPath = fs.realpathSync(sharedComponentPath);
-
-    const isLinked = origPath !== sharedComponentPath;
-
-    console.log(
-        '`@hms-dbmi-bgm/shared-portal-components` directory is',
-        isLinked
-            ? 'sym-linked to `' + sharedComponentPath + '`.'
-            : 'NOT sym-linked.'
-    );
-
-    return {
-        isLinked,
-        sharedComponentPath: isLinked ? sharedComponentPath : null,
-    };
-}
-
 function buildSharedPortalComponents(done) {
     const { isLinked, sharedComponentPath } = getLinkedSharedComponentsPath();
 
@@ -183,127 +124,23 @@ function watchSharedPortalComponents(done) {
     });
 }
 
-// TODO: Just use command-line `node-sass` ?
-
-const cssOutputLocation = './src/encoded/static/css/style.css';
-const sourceMapLocation = './src/encoded/static/css/style.css.map';
-
-// TODO: Consider renaming to print-preview and having separate print stylesheet (for any page)
-const printCssOutputLocation = './src/encoded/static/css/print.css';
-const printSourceMapLocation = './src/encoded/static/css/print.css.map';
-
-function doSassBuild(done, options = {}) {
-    let finishedCount = 4; // 2 x (regular + print) = 4
-    function onFinishCount(addCt = 1) {
-        finishedCount -= addCt;
-        if (finishedCount === 0) {
-            done();
-        }
-    }
-
-    function commonRenderProcess(fromFile, toFile, sourceMapLocation) {
-        sass.render(
-            {
-                file: fromFile,
-                outFile: toFile, // sourceMap location
-                outputStyle: options.outputStyle || 'compressed',
-                sourceMap: true,
-            },
-            function (error, result) {
-                // node-style callback from v3.0.0 onwards
-                if (error) {
-                    console.error(
-                        'Error',
-                        error.status,
-                        error.file,
-                        error.line + ':' + error.column
-                    );
-                    console.log(error.message);
-                    onFinishCount(2);
-                } else {
-                    //console.log(result.css.toString());
-
-                    console.log(
-                        'Finished compiling SCSS in',
-                        result.stats.duration,
-                        'ms'
-                    );
-                    console.log('Writing to', toFile);
-
-                    fs.writeFile(
-                        toFile,
-                        result.css.toString(),
-                        null,
-                        function (err) {
-                            if (err) {
-                                return console.error(err);
-                            }
-                            console.log('Wrote ' + toFile);
-                            onFinishCount();
-                        }
-                    );
-
-                    fs.writeFile(
-                        sourceMapLocation,
-                        result.map.toString(),
-                        null,
-                        function (err) {
-                            if (err) {
-                                return console.error(err);
-                            }
-                            console.log('Wrote ' + sourceMapLocation);
-                            onFinishCount();
-                        }
-                    );
-                }
-            }
-        );
-    }
-
-    commonRenderProcess(
-        './src/encoded/static/scss/style.scss',
-        cssOutputLocation,
-        sourceMapLocation
-    );
-    commonRenderProcess(
-        './src/encoded/static/scss/print.scss',
-        printCssOutputLocation,
-        printSourceMapLocation
-    );
-}
-
 const devQuick = gulp.series(
-    cleanBuildDirectory,
     setQuick,
     doWebpack,
     gulp.parallel(watch, watchSharedPortalComponents)
 );
 
 const devAnalyzed = gulp.series(
-    cleanBuildDirectory,
     setDevelopment,
     buildSharedPortalComponents,
     doWebpack
 );
 
-const build = gulp.series(cleanBuildDirectory, setProduction, doWebpack);
+const build = gulp.series(setProduction, doWebpack);
 
 //gulp.task('dev', devSlow);
 //gulp.task('build-quick', buildQuick);
 gulp.task('default', devQuick);
 gulp.task('dev-quick', devQuick);
 gulp.task('dev-analyzed', devAnalyzed);
 gulp.task('build', build);
-
-gulp.task('build-scss', (done) => doSassBuild(done, {}));
-gulp.task('build-scss-dev', (done) => {
-    doSassBuild(
-        () => {
-            console.log(
-                'Watching for changes (if ran via `npm run watch-scss`)'
-            );
-            done();
-        },
-        { outputStyle: 'expanded' }
-    );
-});

jsbuild-utils.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const fs = require('fs');
+
+/**
+ * Checks for active symlink and returns an object with link status and path to child repo
+ * @returns Object {
+ *      isLinked: boolean,
+ *      sharedComponentPath: string || null
+ * }
+ */
+function getLinkedSharedComponentsPath() {
+    let sharedComponentPath = path.resolve(
+        __dirname,
+        'node_modules/@hms-dbmi-bgm/shared-portal-components'
+    );
+    const origPath = sharedComponentPath;
+
+    // Follow any symlinks to get to real path.
+    sharedComponentPath = fs.realpathSync(sharedComponentPath);
+
+    const isLinked = origPath !== sharedComponentPath;
+
+    console.log(
+        '`@hms-dbmi-bgm/shared-portal-components` directory is',
+        isLinked
+            ? 'sym-linked to `' + sharedComponentPath + '`.'
+            : 'NOT sym-linked.'
+    );
+
+    return {
+        isLinked,
+        sharedComponentPath: isLinked ? sharedComponentPath : null,
+    };
+}
+
+module.exports = {
+    getLinkedSharedComponentsPath,
+};