Commit 7a757906 authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] improve uglifying and make both pipelines highly configurable

parent 4e20daba
const hirestime = require('hirestime');
const getElapsed = hirestime();
const cliArguments = require('yargs').argv; const cliArguments = require('yargs').argv;
const logger = require('./logger'); const logger = require('./logger');
const chalk = require('chalk'); const chalk = require('chalk');
...@@ -29,6 +31,13 @@ class Run { ...@@ -29,6 +31,13 @@ class Run {
static _getTaskName() { static _getTaskName() {
return cliArguments._[0] ? cliArguments._[0] : 'default'; return cliArguments._[0] ? cliArguments._[0] : 'default';
} }
static processEnd() {
logger.info(`SGC finished after ${getElapsed(hirestime.S)}s`);
}
} }
// kickstart the runner
new Run(); new Run();
// call _processEnd before exiting the program
process.on('exit', Run.processEnd.bind(null, {cleanup: true}));
...@@ -3,6 +3,7 @@ const fs = require('fs'); ...@@ -3,6 +3,7 @@ const fs = require('fs');
const path = require('path'); const path = require('path');
const mkdirp = require('mkdirp'); const mkdirp = require('mkdirp');
const chalk = require('chalk'); const chalk = require('chalk');
const argv = require('yargs').argv;
const settings = require('./settings'); const settings = require('./settings');
/** /**
...@@ -18,6 +19,17 @@ module.exports = class task { ...@@ -18,6 +19,17 @@ module.exports = class task {
this._config = this._settings.getConfig(); this._config = this._settings.getConfig();
this._path = this._settings.getPath(); this._path = this._settings.getPath();
this._logger = require('./logger'); this._logger = require('./logger');
if (argv.prod || argv.production) {
this._config.cssPipeline = this._config.css.pipeline.prod;
this._config.jsPipeline = this._config.js.pipeline.prod;
this._config.mode = 'prod';
this._logger.info(`Starting task ${chalk.bold(this.constructor.name.toLowerCase())} in prod mode`);
} else {
this._config.cssPipeline = this._config.css.pipeline.dev;
this._config.jsPipeline = this._config.js.pipeline.dev;
this._config.mode = 'dev';
this._logger.info(`Starting task ${chalk.bold(this.constructor.name.toLowerCase())} in dev mode`);
}
} }
/** /**
......
...@@ -36,7 +36,9 @@ module.exports = class Css extends Task { ...@@ -36,7 +36,9 @@ module.exports = class Css extends Task {
this._logTaskNotDefined(`css:${_subTask}`); this._logTaskNotDefined(`css:${_subTask}`);
} }
} else { } else {
this._runQa(); if (this._config.cssPipeline.qa) {
this._runQa();
}
this._runCompile(); this._runCompile();
} }
} }
...@@ -73,7 +75,7 @@ module.exports = class Css extends Task { ...@@ -73,7 +75,7 @@ module.exports = class Css extends Task {
* @param {String} _fileName The name of the input file * @param {String} _fileName The name of the input file
*/ */
_getOutputPath(_fileName) { _getOutputPath(_fileName) {
let newSuffix = this._config.css.pipeline.renameToDotMin let newSuffix = this._config.cssPipeline.renameToDotMin
? '.min.css' ? '.min.css'
: '.css'; : '.css';
let fileName = path.basename(_fileName).replace('.scss', newSuffix); let fileName = path.basename(_fileName).replace('.scss', newSuffix);
...@@ -105,36 +107,43 @@ module.exports = class Css extends Task { ...@@ -105,36 +107,43 @@ module.exports = class Css extends Task {
file: _input, file: _input,
outFile: _output, outFile: _output,
outputStyle: 'expanded', outputStyle: 'expanded',
sourceMap: true, sourceMap: this._config.cssPipeline.sourceMaps,
sourceMapEmbed: false, sourceMapEmbed: false,
precision: 8 precision: 8
}); });
let cssString = this._imageDimensions(compiledSass.css.toString()); let cssString = this._imageDimensions(compiledSass.css.toString());
let postProcessedCss = await postcss([ let postCssPlugins = [autoprefixer];
autoprefixer, if (this._config.cssPipeline.cleanCss) {
postcssClean postCssPlugins.push(postcssClean);
]).process(cssString, { }
let postProcessedCss = await postcss(postCssPlugins).process(cssString, {
from: _input, from: _input,
to: _output, to: _output,
map: { map: this._config.cssPipeline.sourceMaps ? {
prev: compiledSass.map.toString(), prev: compiledSass.map.toString(),
inline: false, inline: false,
annotation: path.join(path.relative(path.dirname(_output), path.dirname(sourceMapPath)), path.basename(sourceMapPath)) annotation: path.join(path.relative(path.dirname(_output), path.dirname(sourceMapPath)), path.basename(sourceMapPath))
} } : undefined
}); });
await this._writeFile(_output, postProcessedCss.css); await this._writeFile(_output, postProcessedCss.css);
await this._writeFile(sourceMapPath, postProcessedCss.map); if (this._config.cssPipeline.sourceMaps) {
await this._writeFile(sourceMapPath, postProcessedCss.map);
}
const outFileName = path.basename(_output); const outFileName = path.basename(_output);
const mapFileName = path.basename(sourceMapPath); const mapFileName = path.basename(sourceMapPath);
browserSync.reload([outFileName, mapFileName]); if (this._config.mode === 'dev') {
browserSync.reload([outFileName, mapFileName]);
}
this._logger.success(`Written ${chalk.white(outFileName)}`) this._logger.success(`Written ${chalk.white(outFileName)}`);
this._logger.success(`Written ${chalk.white(mapFileName)}`) if (this._config.cssPipeline.sourceMaps) {
this._logger.success(`Written ${chalk.white(mapFileName)}`);
}
} }
/** /**
...@@ -142,7 +151,7 @@ module.exports = class Css extends Task { ...@@ -142,7 +151,7 @@ module.exports = class Css extends Task {
* *
* @param {String} _input The path to the input file * @param {String} _input The path to the input file
*/ */
async _qa(_input) {return; async _qa(_input) {
let file = fs.readFileSync(_input, "utf8"); let file = fs.readFileSync(_input, "utf8");
postcss([ postcss([
stylelint({ stylelint({
...@@ -170,7 +179,7 @@ module.exports = class Css extends Task { ...@@ -170,7 +179,7 @@ module.exports = class Css extends Task {
} }
); );
const partialFilePath = path.join(this._getFullPath(this._config.directories.sass), '_svg.scss'); const partialFilePath = path.join(this._getFullPath(this._config.directories.sass), '_svg.scss');
this._logger.success(`Ẁritten ${partialFilePath}`); this._logger.success(`Ẁritten ${chalk.white(path.basename(partialFilePath))}`);
return this._writeFile(partialFilePath, svgPartial); return this._writeFile(partialFilePath, svgPartial);
} }
......
...@@ -5,7 +5,7 @@ const chalk = require('chalk'); ...@@ -5,7 +5,7 @@ const chalk = require('chalk');
const globby = require('globby'); const globby = require('globby');
const browserify = require('browserify'); const browserify = require('browserify');
const babelify = require('babelify'); const babelify = require('babelify');
const uglifyify = require('uglifyify'); const minifyStream = require('minify-stream');
const CLIEngine = require("eslint").CLIEngine; const CLIEngine = require("eslint").CLIEngine;
const exorcist = require('exorcist'); const exorcist = require('exorcist');
const browserSync = require('browser-sync'); const browserSync = require('browser-sync');
...@@ -30,7 +30,9 @@ module.exports = class Js extends Task { ...@@ -30,7 +30,9 @@ module.exports = class Js extends Task {
} }
} else { } else {
// otherwise execute everything // otherwise execute everything
this._runQa(); if (this._config.jsPipeline.qa) {
this._runQa();
}
this._runCompile(); this._runCompile();
} }
} }
...@@ -64,7 +66,7 @@ module.exports = class Js extends Task { ...@@ -64,7 +66,7 @@ module.exports = class Js extends Task {
* @param {String} _fileName The name of the input file * @param {String} _fileName The name of the input file
*/ */
_getOutputPath(_fileName) { _getOutputPath(_fileName) {
let newSuffix = this._config.js.pipeline.renameToDotMin let newSuffix = this._config.jsPipeline.renameToDotMin
? '.bundled.min.js' ? '.bundled.min.js'
: '.bundled.js'; : '.bundled.js';
let fileName = path.basename(_fileName).replace('.js', newSuffix); let fileName = path.basename(_fileName).replace('.js', newSuffix);
...@@ -88,7 +90,7 @@ module.exports = class Js extends Task { ...@@ -88,7 +90,7 @@ module.exports = class Js extends Task {
* @param {String} _output The path to the output file * @param {String} _output The path to the output file
*/ */
async _compile(_input, _output) { async _compile(_input, _output) {
const presetEnvConfiguration = this._config.js.pipeline.polyfills ? { const presetEnvConfiguration = this._config.jsPipeline.polyfills ? {
targets: { targets: {
browsers: this._config.supportedBrowsers browsers: this._config.supportedBrowsers
}, },
...@@ -97,24 +99,32 @@ module.exports = class Js extends Task { ...@@ -97,24 +99,32 @@ module.exports = class Js extends Task {
try { try {
this._logger.displayBrowserSyncNotification('Compiling JS – hang in there...'); this._logger.displayBrowserSyncNotification('Compiling JS – hang in there...');
let sourceMapPath = this._getSourceMapsPath(_output); let relativeSourceMapPath
let relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath)); if (this._config.jsPipeline.sourceMaps) {
browserify(_input, { let sourceMapPath = this._getSourceMapsPath(_output);
relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath));
}
let bundler = browserify(_input, {
paths: this._config.js.libraryPaths, paths: this._config.js.libraryPaths,
debug: true debug: this._config.jsPipeline.sourceMaps
}) }).transform(babelify, {
.transform(babelify, { presets: [
presets: [ [require('@babel/preset-env'), presetEnvConfiguration],
[require('@babel/preset-env'), presetEnvConfiguration], ]
] }).bundle();
})
.transform(uglifyify) if (this._config.jsPipeline.uglify) {
.bundle() bundler.pipe(minifyStream());
.pipe(exorcist( }
if (this._config.jsPipeline.sourceMaps) {
bundler.pipe(exorcist(
this._getSourceMapsPath(_output), this._getSourceMapsPath(_output),
path.relative(path.dirname(_output), relativeSourceMapPath) path.relative(path.dirname(_output), relativeSourceMapPath)
)) ));
.pipe(fs.createWriteStream(_output)); }
bundler.pipe(fs.createWriteStream(_output));
browserSync.reload('*.js'); browserSync.reload('*.js');
this._logger.success(`Written ${chalk.white(path.basename(_output))}`); this._logger.success(`Written ${chalk.white(path.basename(_output))}`);
......
...@@ -5439,6 +5439,23 @@ ...@@ -5439,6 +5439,23 @@
"resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz", "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
"integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=" "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4="
}, },
"from2": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
"integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
"requires": {
"inherits": "^2.0.1",
"readable-stream": "^2.0.0"
}
},
"from2-string": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/from2-string/-/from2-string-1.1.0.tgz",
"integrity": "sha1-GCgrJ9CKJnyzAwzSuLSw8hKvdSo=",
"requires": {
"from2": "^2.0.3"
}
},
"fs-constants": { "fs-constants": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
...@@ -6568,6 +6585,11 @@ ...@@ -6568,6 +6585,11 @@
"resolved": "https://registry.npmjs.org/hexy/-/hexy-0.2.11.tgz", "resolved": "https://registry.npmjs.org/hexy/-/hexy-0.2.11.tgz",
"integrity": "sha512-ciq6hFsSG/Bpt2DmrZJtv+56zpPdnq+NQ4ijEFrveKN0ZG1mhl/LdT1NQZ9se6ty1fACcI4d4vYqC9v8EYpH2A==" "integrity": "sha512-ciq6hFsSG/Bpt2DmrZJtv+56zpPdnq+NQ4ijEFrveKN0ZG1mhl/LdT1NQZ9se6ty1fACcI4d4vYqC9v8EYpH2A=="
}, },
"hirestime": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/hirestime/-/hirestime-3.2.1.tgz",
"integrity": "sha512-VoXZ1Wz2lII6KZid7ByyeoW1TheD/Hiu6r9TjWWFUM2O3tddeRlj2/yGP63bZiIizHXW336eW0KNUiD6wngzSw=="
},
"hmac-drbg": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
...@@ -8117,6 +8139,19 @@ ...@@ -8117,6 +8139,19 @@
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
}, },
"minify-stream": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minify-stream/-/minify-stream-1.2.0.tgz",
"integrity": "sha512-bIjBH7uGROwzWwgtbLO7U/yi+NBTLGs5YYidUiGD9nJZ5wuxX0485c48vtJ7WlNZNnKvHXA1D1ZXpfWJqf4fyg==",
"requires": {
"concat-stream": "^1.6.0",
"convert-source-map": "^1.5.0",
"duplexify": "^3.5.1",
"from2-string": "^1.1.0",
"terser": "^3.7.5",
"xtend": "^4.0.1"
}
},
"minimalistic-assert": { "minimalistic-assert": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment