Skip to content

GitLab

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

[FEATURE] improve uglifying and make both pipelines highly configurable

parent 4e20daba
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 34 deletions
core/run.js
View file @ 7a757906
const hirestime = require('hirestime');
const getElapsed = hirestime();
const cliArguments = require('yargs').argv;
const logger = require('./logger');
const chalk = require('chalk');
......@@ -29,6 +31,13 @@ class Run {
static _getTaskName() {
return cliArguments._[0] ? cliArguments._[0] : 'default';
}
static processEnd() {
logger.info(`SGC finished after ${getElapsed(hirestime.S)}s`);
}
}
// kickstart the runner
new Run();
// call _processEnd before exiting the program
process.on('exit', Run.processEnd.bind(null, {cleanup: true}));
core/task.js
View file @ 7a757906
......@@ -3,6 +3,7 @@ const fs = require('fs');
const path = require('path');
const mkdirp = require('mkdirp');
const chalk = require('chalk');
const argv = require('yargs').argv;
const settings = require('./settings');
/**
......@@ -18,6 +19,17 @@ module.exports = class task {
this._config = this._settings.getConfig();
this._path = this._settings.getPath();
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`);
}
}
/**
......
core/tasks/css.js
View file @ 7a757906
......@@ -36,7 +36,9 @@ module.exports = class Css extends Task {
this._logTaskNotDefined(`css:${_subTask}`);
}
} else {
this._runQa();
if (this._config.cssPipeline.qa) {
this._runQa();
}
this._runCompile();
}
}
......@@ -73,7 +75,7 @@ module.exports = class Css extends Task {
* @param {String} _fileName The name of the input file
*/
_getOutputPath(_fileName) {
let newSuffix = this._config.css.pipeline.renameToDotMin
let newSuffix = this._config.cssPipeline.renameToDotMin
? '.min.css'
: '.css';
let fileName = path.basename(_fileName).replace('.scss', newSuffix);
......@@ -105,36 +107,43 @@ module.exports = class Css extends Task {
file: _input,
outFile: _output,
outputStyle: 'expanded',
sourceMap: true,
sourceMap: this._config.cssPipeline.sourceMaps,
sourceMapEmbed: false,
precision: 8
});
let cssString = this._imageDimensions(compiledSass.css.toString());
let postProcessedCss = await postcss([
autoprefixer,
postcssClean
]).process(cssString, {
let postCssPlugins = [autoprefixer];
if (this._config.cssPipeline.cleanCss) {
postCssPlugins.push(postcssClean);
}
let postProcessedCss = await postcss(postCssPlugins).process(cssString, {
from: _input,
to: _output,
map: {
map: this._config.cssPipeline.sourceMaps ? {
prev: compiledSass.map.toString(),
inline: false,
annotation: path.join(path.relative(path.dirname(_output), path.dirname(sourceMapPath)), path.basename(sourceMapPath))
}
} : undefined
});
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 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(mapFileName)}`)
this._logger.success(`Written ${chalk.white(outFileName)}`);
if (this._config.cssPipeline.sourceMaps) {
this._logger.success(`Written ${chalk.white(mapFileName)}`);
}
}
/**
......@@ -142,7 +151,7 @@ module.exports = class Css extends Task {
*
* @param {String} _input The path to the input file
*/
async _qa(_input) {return;
async _qa(_input) {
let file = fs.readFileSync(_input, "utf8");
postcss([
stylelint({
......@@ -170,7 +179,7 @@ module.exports = class Css extends Task {
}
);
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);
}
......
core/tasks/js.js
View file @ 7a757906
......@@ -5,7 +5,7 @@ const chalk = require('chalk');
const globby = require('globby');
const browserify = require('browserify');
const babelify = require('babelify');
const uglifyify = require('uglifyify');
const minifyStream = require('minify-stream');
const CLIEngine = require("eslint").CLIEngine;
const exorcist = require('exorcist');
const browserSync = require('browser-sync');
......@@ -30,7 +30,9 @@ module.exports = class Js extends Task {
}
} else {
// otherwise execute everything
this._runQa();
if (this._config.jsPipeline.qa) {
this._runQa();
}
this._runCompile();
}
}
......@@ -64,7 +66,7 @@ module.exports = class Js extends Task {
* @param {String} _fileName The name of the input file
*/
_getOutputPath(_fileName) {
let newSuffix = this._config.js.pipeline.renameToDotMin
let newSuffix = this._config.jsPipeline.renameToDotMin
? '.bundled.min.js'
: '.bundled.js';
let fileName = path.basename(_fileName).replace('.js', newSuffix);
......@@ -88,7 +90,7 @@ module.exports = class Js extends Task {
* @param {String} _output The path to the output file
*/
async _compile(_input, _output) {
const presetEnvConfiguration = this._config.js.pipeline.polyfills ? {
const presetEnvConfiguration = this._config.jsPipeline.polyfills ? {
targets: {
browsers: this._config.supportedBrowsers
},
......@@ -97,24 +99,32 @@ module.exports = class Js extends Task {
try {
this._logger.displayBrowserSyncNotification('Compiling JS – hang in there...');
let sourceMapPath = this._getSourceMapsPath(_output);
let relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath));
browserify(_input, {
let relativeSourceMapPath
if (this._config.jsPipeline.sourceMaps) {
let sourceMapPath = this._getSourceMapsPath(_output);
relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath));
}
let bundler = browserify(_input, {
paths: this._config.js.libraryPaths,
debug: true
})
.transform(babelify, {
presets: [
[require('@babel/preset-env'), presetEnvConfiguration],
]
})
.transform(uglifyify)
.bundle()
.pipe(exorcist(
debug: this._config.jsPipeline.sourceMaps
}).transform(babelify, {
presets: [
[require('@babel/preset-env'), presetEnvConfiguration],
]
}).bundle();
if (this._config.jsPipeline.uglify) {
bundler.pipe(minifyStream());
}
if (this._config.jsPipeline.sourceMaps) {
bundler.pipe(exorcist(
this._getSourceMapsPath(_output),
path.relative(path.dirname(_output), relativeSourceMapPath)
))
.pipe(fs.createWriteStream(_output));
));
}
bundler.pipe(fs.createWriteStream(_output));
browserSync.reload('*.js');
this._logger.success(`Written ${chalk.white(path.basename(_output))}`);
......
package-lock.json
View file @ 7a757906
......@@ -5439,6 +5439,23 @@
"resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
"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": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
......@@ -6568,6 +6585,11 @@
"resolved": "https://registry.npmjs.org/hexy/-/hexy-0.2.11.tgz",
"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": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
......@@ -8117,6 +8139,19 @@
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"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": {
"version": "1.0.1",
"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