Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bm gulp experiments #21

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 0 additions & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
169 changes: 3 additions & 166 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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) {
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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' }
);
});
38 changes: 38 additions & 0 deletions jsbuild-utils.js
Original file line number Diff line number Diff line change
@@ -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,
};
Loading
Loading