Commit da21d421 authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] assemble javascript task

parent c8a6b777
......@@ -20,6 +20,7 @@ class Settings {
this._extension = this._config.extensions[0];
this._tasks = {
css: () => {return require('./tasks/css')},
js: () => {return require('./tasks/js')},
watch: () => {return require('./tasks/watch')}
};
}
......
const Task = require('../task');
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const globby = require('globby');
const browserify = require('browserify');
const babelify = require('babelify');
const CLIEngine = require("eslint").CLIEngine;
/**
* The JS task takes care of compiling JavaScript and running qa on it
*/
module.exports = class Js extends Task {
/**
* Start the build process
*/
async run(_subTask = null) {
if (_subTask) {
const files = await globby([
`${this._path}/${this._config.directories.javascriptSrc}/**/*.js`,
'!**/*.min.js'
].concat(this._config.js.excludeFromQa));
if (_subTask === 'qa') {
this._qa(files);
} else {
this._logTaskNotDefined(`js:${_subTask}`);
}
} else {
const files = await globby([
`${this._path}/${this._config.directories.javascriptSrc}/*.js`
]);
files.forEach(file => {
this._compile(file, this._getOutputPath(file));
});
}
}
/**
* Returns the name of the output file
*
* @param {String} _fileName The name of the input file
*/
_getOutputPath(_fileName) {
let newSuffix = this._config.js.pipeline.renameToDotMin
? '.bundled.min.js'
: '.bundled.js';
let fileName = path.basename(_fileName).replace('.js', newSuffix);
return this._getFullPath(`${this._config.directories.javascriptDest}/${fileName}`);
}
/**
* Returns the path to the sourceMap associated with _fileName
*
* @param {String} _fileName The name of the JS-file the sourceMap is associated with
*/
_getSourceMapsPath(_fileName) {
let fileName = path.basename(_fileName).replace('.js', '.js.map');
return this._getFullPath(`${this._config.directories.javascriptSrcSourceMaps}/${fileName}`);
}
/**
* Compiles and bundles the JS
*
* @param {String} _input The path to the input file
* @param {String} _output The path to the output file
*/
async _compile(_input, _output) {
try {
browserify(_input, {
paths: this._config.js.libraryPaths
})
.transform(babelify, {
presets: [
require('@babel/preset-env'),
]
})
.bundle()
.pipe(fs.createWriteStream(_output));
this._logger.success(`Written ${chalk.white(path.basename(_output))}`);
} catch(_error) {
this._logger.error(_error.stack);
}
}
/**
* Runs qa tasks against all JS source files
*
* @param {Array} _files The array containing all src files
*/
async _qa(_files) {
let cli = new CLIEngine({
envs: ['browser'],
useEslintrc: true
});
let formatter = cli.getFormatter();
let report = cli.executeOnFiles(_files);
console.log(formatter(report.results));
}
}
......@@ -12,6 +12,7 @@ module.exports = class Watch extends Task {
*/
async run() {
this._watchCss();
this._watchJs();
}
/**
......@@ -23,7 +24,21 @@ module.exports = class Watch extends Task {
].concat(this._config.css.excludeFromQa));
files.forEach(file => {
watch(file, { recursive: true }, this._onChange.bind(this));
watch(file, { recursive: true }, this._onCssChange.bind(this));
});
}
/**
* Watch for JS-related files
*/
async _watchJs() {
const files = await globby([
`${this._path}/${this._config.directories.javascriptSrc}/**/*.js`,
'!**/*.min.js'
].concat(this._config.js.excludeFromQa));
files.forEach(file => {
watch(file, { recursive: true }, this._onJsChange.bind(this));
});
}
......@@ -34,6 +49,14 @@ module.exports = class Watch extends Task {
let task = this._settings.tasks.css();
new task().run();
}
/**
* Trigger JS-compilation
*/
_triggerJs() {
let task = this._settings.tasks.js();
new task().run();
}
/**
* This function will execute on file changes
......@@ -41,8 +64,19 @@ module.exports = class Watch extends Task {
* @param {Event} _event The change event
* @param {String} _fileName The path to the file that changed
*/
_onChange(_event, _fileName) {
_onCssChange(_event, _fileName) {
this._logger.info(`${_fileName} changed`);
this._triggerCss();
}
/**
* This function will execute on file changes
*
* @param {Event} _event The change event
* @param {String} _fileName The path to the file that changed
*/
_onJsChange(_event, _fileName) {
this._logger.info(`${_fileName} changed`);
this._triggerJs();
}
}
This diff is collapsed.
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