From 10f9884d54b3330a471291fb8caa67f38ee88c66 Mon Sep 17 00:00:00 2001
From: Eugene Kuzmenko <aljey1972@gmail.com>
Date: Mon, 11 Jan 2016 17:56:56 +0200
Subject: [PATCH] [fixed] the `.scss` loader for webpack

---
 docs/JSCompiler.js.html | 2 +-
 docs/quicksearch.html   | 2 +-
 lib/JSCompiler.js       | 2 +-
 package.json            | 2 +-
 src/JSCompiler.js       | 2 +-
 test/JSCompiler.spec.js | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/JSCompiler.js.html b/docs/JSCompiler.js.html
index 0414806..a009501 100644
--- a/docs/JSCompiler.js.html
+++ b/docs/JSCompiler.js.html
@@ -309,7 +309,7 @@ <h1 class="page-title">Source: JSCompiler.js</h1>
           query: {cacheDirectory: true, ...this.options}
         }, {
           test: /\.scss$/,
-          loaders: ['style?singleton', 'css?modules&amp;minimize&amp;importLoaders=1&amp;sourceMap', 'postcss', 'sass&amp;sourceMap']
+          loaders: ['style?singleton', 'css?modules&amp;minimize&amp;importLoaders=1&amp;sourceMap', 'postcss', 'sass?sourceMap']
         }]
       },
       postcss: () => [autoprefixer],
diff --git a/docs/quicksearch.html b/docs/quicksearch.html
index 0418e17..fb0c936 100644
--- a/docs/quicksearch.html
+++ b/docs/quicksearch.html
@@ -7,7 +7,7 @@
     <script src="scripts/fulltext-search.js"></script>
 
     <script type="text/x-docstrap-searchdb">
-    {"SASSCompiler.js.html":{"id":"SASSCompiler.js.html","title":"Source: SASSCompiler.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: SASSCompiler.js /* @flow */ import {Compiler} from './Compiler'; import type {ProgramData} from './Compiler'; import {render} from 'node-sass'; import importer from 'node-sass-import-once'; import CleanCSS from 'clean-css'; import postcss from 'postcss'; import autoprefixer from 'autoprefixer'; const precision = 8, roundingPrecision = -1, sourceMappingURLPattern = /\\n*\\/\\*# sourceMappingURL=\\S+ \\*\\//, options = { file: null, outFile: null, importer, importOnce: {index: true, css: false, bower: false}, includePaths: ['node_modules/bootstrap-sass/assets/stylesheets', 'node_modules'], precision, sourceMap: true, sourceMapContents: true }, /* @flowignore */ emptyFn: () =&gt; void = Function.prototype; /** * Invoked on operation success or failure * * @callback AutoprefixCallback * @param {ProgramData} data - the parsed object */ type AutoprefixCallback = (data: ProgramData) =&gt; void; /** * A SASS compiler * * @class SASSCompiler * @extends Compiler * @param {Array&lt;string&gt;} [includePaths=[]] - an array of additional include paths * @param {Object} [importOnceOptions={}] - an object that lets you override default importOnce resolver * configuration * @example * import {SASSCompiler} from 'webcompiler'; * * const compiler = new SASSCompiler(); */ export class SASSCompiler extends Compiler { /** * an array of paths to search for an scss file in if it's not found in cwd * * @member {Array&lt;string&gt;} includePaths * @memberof SASSCompiler * @private * @instance */ includePaths: Array&lt;string&gt;; /** * importOnce resolver configuration * * @member {Object} importOnce * @memberof SASSCompiler * @private * @instance */ importOnce: Object; constructor(includePaths: Array&lt;string&gt; = [], importOnceOptions: Object = {}) { super(); this.includePaths = options.includePaths.concat(includePaths); this.importOnce = Object.assign({}, options.importOnce, importOnceOptions); } /** * Minifies the compiled code * * @memberOf SASSCompiler * @instance * @method minify * @param {string} path - a path to the file (can be used for the sourceMappingURL comment) * @param {ProgramData} data - the actual program data to compress * @return {ProgramData} processed application code with source maps or null on error * @example * const minifiedData = compiler.minify('/path/to/the/output/file.css', data); */ minify(path: string, data: ProgramData): ?ProgramData { const sourceMappingURL = data.code.match(sourceMappingURLPattern), minified = new CleanCSS({ keepSpecialComments: 0, roundingPrecision, sourceMap: data.map, sourceMapInlineSources: true }).minify(data.code), errors = minified.errors.concat(minified.warnings); if (errors.length) { errors.forEach(error =&gt; { console.error(error); }); return null; } return {code: `${minified.styles}${sourceMappingURL ? sourceMappingURL[0] : ''}`, map: minified.sourceMap}; } /** * Auto-prefixes the compiled code * * @memberOf SASSCompiler * @instance * @method autoprefix * @param {string} path - a path to the file * @param {ProgramData} data - the actual program data to auto-prefix * @param {AutoprefixCallback} callback - a callback function * @example * compiler.autoprefix('/path/to/the/output/file.css', data, result =&gt; { * // successfully added the vendor prefixes * }); */ autoprefix(path: string, data: ProgramData, callback: AutoprefixCallback) { postcss([autoprefixer]).process(data.code, { from: path, to: path, map: {prev: data.map} }).then(result =&gt; { const warnings = result.warnings(); if (warnings.length) { return warnings.forEach(warning =&gt; { console.error(warning.toString()); }); } callback({code: result.css, map: JSON.stringify(result.map)}); }); } /** * Compiles, auto-prefixes and optionally minifies and g-zips in the production mode * * @memberof SASSCompiler * @instance * @method fe * @param {string} inPath - a full system path to the input file * @param {string} outPath - a full system path to the output file * @param {Function} [callback=function () {}] - a callback function * @example * compiler.fe('/path/to/the/input/file.scss', '/path/to/the/output/file.css', () =&gt; { * // compiled successfully * }); */ fe(inPath: string, outPath: string, callback: () =&gt; void = emptyFn) { render(Object.assign({}, options, { file: inPath, outFile: outPath, importOnce: this.importOnce, includePaths: this.includePaths }), (error, result) =&gt; { if (error) { return console.log( '\\x1b[41mSASS error\\x1b[0m &quot;\\x1b[33m%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', error.message, error.file, error.line, error.column); } this.autoprefix(outPath, {code: result.css, map: result.map.toString()}, data =&gt; { if (this.isProduction) { return this.optimize(inPath, outPath, data, callback); } this.fsWrite(outPath, data, () =&gt; { this.done(inPath, callback); }); }); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Documentation.js.html":{"id":"Documentation.js.html","title":"Source: Documentation.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: Documentation.js /* @flow */ import {NativeProcess} from './NativeProcess'; import {stat} from 'fs'; import {join} from 'path'; const npm = new NativeProcess('npm'), defaultConfig = join(__dirname, '..', 'config', 'jsdoc.json'), cwd = process.cwd(), /* @flowignore */ emptyFn: () =&gt; void = Function.prototype; /** * Processed application code with source maps * * @typedef {Object} DocumentationConfig * @property {string} [inputDir=&quot;src&quot;] - the input application code directory * @property {string} [outputDir=&quot;docs&quot;] - the output directory for the generated documentation * @property {string} [readMe=&quot;README.md&quot;] - the documentation &quot;homepage&quot; (README.md file) * @property {string} [template=&quot;node_modules/ink-docstrap/template&quot;] - a full system path to a valid JSDoc3 * template directory * @property {string} [jsdocConfig=&quot;&lt;webcompiler root&gt;/config/jsdoc.json&quot;] - a full system path to a JSDoc3 * configuration file */ /** * Invoked on operation success or failure * * @callback FindExecutableCallback * @param {string} file - a full system path to a file */ type FindExecutableCallback = (file: string) =&gt; void; /** * Invoked on operation success or failure * * @callback CheckBinCallback * @param {string} [file] - a full system path to a file */ export type CheckBinCallback = (file: ?string) =&gt; void; /** * Generates API documentation * * The default JSDoc plugin specified in `jsdocConfig` strips out all of the code from a file while retaining newlines * (unlike the built in `commentsOnly` plugin that ships with JSDoc3). * * That way: * 1. line numbers are preserved in the source view * 2. you don't need to use a pre-compiler, you will always see the same code as you wrote in the docs source view * 3. since JSDoc only sees comments you can use any code syntax you like - ES2015, ES7, JSX, it doesn't even have to be * JavaScript. * * The markdown plugin is also included by default. * * @class Documentation * @param {DocumentationConfig} [config={}] - a configuration object * @example * import {Documentation} from 'webcompiler'; * * const docs = new Documentation(); */ export class Documentation { /** * JSDoc3 * * @member {NativeProcess} jsdoc * @memberof Documentation * @private * @instance */ jsdoc: ?NativeProcess; /** * the input application code directory * * @member {string} inputDir * @memberof Documentation * @private * @instance */ inputDir: string; /** * the output directory for the generated documentation * * @member {string} outputDir * @memberof Documentation * @private * @instance */ outputDir: string; /** * the documentation &quot;homepage&quot; (README.md file) * * @member {string} readMe * @memberof Documentation * @private * @instance */ readMe: string; /** * a full system path to a valid JSDoc3 template directory * * @member {string} template * @memberof Documentation * @private * @instance */ template: string; /** * a full system path to a JSDoc3 configuration file * * @member {string} jsdocConfig * @memberof Documentation * @private * @instance */ jsdocConfig: string; constructor({inputDir, outputDir, readMe, template, jsdocConfig}: {inputDir?: string, outputDir?: string, readMe?: string, template?: string, jsdocConfig?: string} = {}) { this.inputDir = inputDir || join(cwd, 'src'); this.outputDir = outputDir || join(cwd, 'docs'); this.readMe = readMe || join(cwd, 'README.md'); this.template = template || join(cwd, 'node_modules', 'ink-docstrap', 'template'); this.jsdocConfig = jsdocConfig || defaultConfig; } /** * Generate the documentation * * @memberof Documentation * @instance * @method run * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * docs.run(() =&gt; { * // generated the API documentation * }); */ run(callback: () =&gt; void = emptyFn) { if (this.jsdoc) { return this.doRun(this.jsdoc, callback); } this.findExecutable(file =&gt; { this.jsdoc = new NativeProcess(file); this.doRun(this.jsdoc, callback); }); } /** * Given a JSDoc3 executable, generate the documentation * * @memberof Documentation * @instance * @private * @method doRun * @param {NativeProcess} jsdoc - JSDoc3 * @param {Function} callback - a callback function * @example * docs.doRun(jsdoc, () =&gt; { * // generated the API documentation * }); */ doRun(jsdoc: NativeProcess, callback: () =&gt; void) { jsdoc.run(stderr =&gt; { if (stderr) { return console.error(stderr); } callback(); }, [this.inputDir, '-d', this.outputDir, '-R', this.readMe, '-c', this.jsdocConfig, '-t', this.template]); } /** * Finds a path to the JSDoc3 executable * * @memberof Documentation * @instance * @private * @method findExecutable * @param {FindExecutableCallback} callback - a callback function * @example * docs.findExecutable(file =&gt; { * // the jsdoc file is found * }); */ findExecutable(callback: FindExecutableCallback) { this.checkBin(localFile =&gt; { if (localFile) { return callback(localFile); } this.checkBin(globalFile =&gt; { if (globalFile) { return callback(globalFile); } console.error('Failed to locate the jsdoc executable'); }, true); }); } /** * Checks the NPM bin directories to see if they contain a file named jsdoc * * @memberof Documentation * @instance * @private * @method checkBin * @param {CheckBinCallback} callback - a callback function * @param {globalPackage} [boolean=false] - if true checks the global NPM bin directory (contains the npm * executable itself) * @example * docs.checkBin(file =&gt; { * if (file) { * // the jsdoc file is found * } * }); */ checkBin(callback: CheckBinCallback, globalPackage: boolean = false) { const args = ['bin']; if (globalPackage) { args.push('-g'); } npm.run((stderr, stdout) =&gt; { if (stderr) { console.error(stderr); return callback(null); } const path = join(stdout.replace(/\\n$/, ''), 'jsdoc'); stat(path, err =&gt; { callback(err ? null : path); }); }, args); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Compiler.js.html":{"id":"Compiler.js.html","title":"Source: Compiler.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: Compiler.js /* @flow */ import mkdirp from 'mkdirp'; import {dirname} from 'path'; import {writeFile} from 'fs'; import {gzip} from 'zlib'; let i = 0; /** * Processed application code with source maps * * @typedef {Object} ProgramData * @property {string} code - program code * @property {string} map - source map json string */ export type ProgramData = {code: string, map: string}; /** * The base compiler class * * @class Compiler * @abstract */ export class Compiler { /** * True if the NODE_ENV environment variable is equal to `production`. * * Caution: modifying it's value directly may lead to unexpected results * * @member {boolean} isProduction * @memberof Compiler * @readOnly * @instance */ isProduction: boolean; constructor() { this.isProduction = 'production' === process.env.NODE_ENV; } /** * Minifies the compiled code * * @memberOf Compiler * @instance * @abstract * @method minify * @param {string} path - a path to the file (can be used for the sourceMappingURL comment) * @param {ProgramData} data - the actual program data to compress * @return {ProgramData} processed application code with source maps or null on error */ minify: (path: string, data: ProgramData) =&gt; ?ProgramData; /** * Executed when the compilation is complete * * @memberOf Compiler * @instance * @protected * @method done * @param {string} inPath - the input path * @param {Function} callback - a callback function * @example * compiler.done('/path/to/an/input/file', callback); */ done(inPath: string, callback: () =&gt; void) { console.log('\\x1b[32m%s. Compiled %s\\x1b[0m', ++i, inPath); callback(); } /** * Writes the data to disk * * @memberOf Compiler * @instance * @protected * @method fsWrite * @param {string} path - the output path * @param {ProgramData} data - the data to write * @param {Function} callback - a callback function * @example * compiler.fsWrite('/path/to/an/output/file', data, callback); */ fsWrite(path: string, data: ProgramData, callback: () =&gt; void) { this.mkdir(path, () =&gt; { writeFile(path, data.code, scriptErr =&gt; { if (scriptErr) { return console.error(scriptErr); } if (!data.map) { return callback(); } writeFile(`${path}.map`, data.map, mapErr =&gt; { if (mapErr) { return console.error(mapErr); } callback(); }); }); }); } /** * Recursively creates a directory containing a file specified by `path`. * * @memberOf Compiler * @instance * @protected * @method mkdir * @param {string} path - a path to a file * @param {Function} callback - a callback function * @example * compiler.mkdir('/path/to/a/file', callback); */ mkdir(path: string, callback: () =&gt; void) { mkdirp(dirname(path), mkdirpErr =&gt; { if (mkdirpErr) { return console.error(mkdirpErr); } callback(); }); } /** * Minifies and g-zips the program * * @memberOf Compiler * @instance * @protected * @method optimize * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {ProgramData} data - processed application code with source maps * @param {Function} callback - a callback function * @example * compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); */ optimize(inPath: string, outPath: string, data: ProgramData, callback: () =&gt; void) { const minified = this.minify(outPath, data); if (!minified) { return; } gzip(minified.code, (gzipErr, code) =&gt; { if (gzipErr) { return console.error(gzipErr); } this.fsWrite(outPath, {code, map: minified.map}, () =&gt; { this.done(inPath, callback); }); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"DevServer.js.html":{"id":"DevServer.js.html","title":"Source: DevServer.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: DevServer.js /* @flow */ import {SASSCompiler} from './SASSCompiler'; import {watch} from './watch'; import tinylr from 'tiny-lr'; import WebpackDevServer from 'webpack-dev-server'; import webpack from 'webpack'; import {join} from 'path'; const LIVERELOAD_PORT = 35729, WEB_PORT = 3000; /** * A lightweight development server that rapidly recompiles the JavaScript and SASS files when they are edited and * updates the page. * * Utilizes the Webpack development server. * * Includes react hot loader to further optimize the development process of the React applications. * * Please install and enable the LiveReload browser extension for the CSS reloading to work. * * @class DevServer * @param {string} script - a full system path to a JavaScript file * @param {string} style - a full system path to a SASS file * @param {string} devDir - a full system path to a directory in which to put any compiled development resources * @param {number} [port=3000] - a port at which to start the dev server * @param {boolean} [react=true] - false to disable the react hot loader plugin * @see {@link http://gaearon.github.io/react-hot-loader/|React Hot Loader} * @example * import {DevServer} from 'webcompiler'; * import {join} from 'path'; * * const rootDir = join(__dirname, '..'), * devDir = join(rootDir, 'development'), * server = new DevServer(join(devDir, 'script.js'), join(devDir, 'app.scss'), devDir); * * server.run(rootDir); * // now navigate to http://localhost:3000 using your favorite browser ( preferably Chrome :) ) */ export class DevServer { /** * a port at which to start the dev server * * @member {number} port * @memberof DevServer * @private * @instance */ port: number; /** * a LiveReload server * * @member {tinylr.Server} lr * @memberof DevServer * @private * @instance */ lr: tinylr.Server; /** * recompiles SASS and notifies LiveReload * * @method compileSASS * @memberof DevServer * @private * @instance */ compileSASS: () =&gt; void; /** * the Webpack development server * * @member {WebpackDevServer} server * @memberof DevServer * @private * @instance */ server: WebpackDevServer; constructor(script: string, style: string, devDir: string, port: number = WEB_PORT, react: boolean = true) { const sass = new SASSCompiler(), loaders = []; if (react) { loaders.push('react-hot'); } loaders.push('babel'); this.port = port; this.lr = tinylr(); this.compileSASS = sass.fe.bind(sass, style, join(devDir, 'style.css'), () =&gt; { this.lr.changed({body: {files: ['style.css']}}); }); this.server = new WebpackDevServer(webpack({ cache: {}, debug: true, devtool: 'eval-source-map', entry: [ `webpack-dev-server/client?http://localhost:${this.port}`, 'webpack/hot/only-dev-server', script ], output: { path: devDir, filename: 'script.js', publicPath: '/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [{ test: /\\.js$/, exclude: /node_modules/, loaders }] } }), { contentBase: devDir, publicPath: '/', hot: true, historyApiFallback: true }); this.server.app.get('*', (req, res) =&gt; { res.send(`&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;title&gt;Development server - Webcompiler&lt;/title&gt; &lt;link href=&quot;/style.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt;&lt;/div&gt; &lt;script src=&quot;/script.js&quot; async defer&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;`); }); } /** * Compile SASS and start watching for file changes * * @memberof DevServer * @instance * @method watchSASS * @param {string} watchDir - the directory in which to watch for the changes in the SASS files * @example * server.watchSASS('/path/to/some/directory'); */ watchSASS(watchDir: string) { this.lr.listen(LIVERELOAD_PORT); this.compileSASS(); watch(watchDir, 'scss', this.compileSASS); } /** * Starts the Webpack development server * * @memberof DevServer * @instance * @method watchJS * @example * server.watchJS(); */ watchJS() { const port = this.port; this.server.listen(port, '0.0.0.0', error =&gt; { if (error) { return console.error(error); } console.log(`Started the development server at localhost:${port}`); }); } /** * Starts the Webpack development server, compiles SASS and starts watching for file changes * * @memberof DevServer * @instance * @method run * @param {string} watchDir - the directory in which to watch for the changes in the SASS files * @example * server.run('/path/to/some/directory'); */ run(watchDir: string) { this.watchJS(); this.watchSASS(watchDir); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JS.js.html":{"id":"JS.js.html","title":"Source: JS.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: JS.js /* @flow */ import {JSCompiler} from './JSCompiler'; import {NativeProcess} from './NativeProcess'; import {JSLint} from './JSLint'; /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype; /** * JavaScript compilation tools * * @class JS * @param {Object} [babelOptions={}] - allows to override the default Babel options * @param {Object} [lintRules={}] - allows to override the default linting rules * @example * import {JS} from 'webcompiler'; * * const js = new JS(); */ export class JS { /** * JavaScript compiler * * @member {JSCompiler} compiler * @memberof JS * @private * @instance */ compiler: JSCompiler; /** * flow static analyzer * * @member {NativeProcess} flow * @memberof JS * @private * @instance */ flow: NativeProcess; /** * JavaScript linter * * @member {JSLint} linter * @memberof JS * @private * @instance */ linter: JSLint; constructor(babelOptions: Object = {}, lintRules: Object = {}) { this.compiler = new JSCompiler(babelOptions); this.flow = new NativeProcess('flow'); this.linter = new JSLint(lintRules); } /** * Performs static analysis * * @memberof JS * @instance * @method typecheck * @param {Function} callback - a callback function, invoked only when successfully typechecked * @example * js.typecheck(() =&gt; { * // successfully typechecked * }); */ typecheck(callback: () =&gt; void) { this.flow.run((flowErr, stdout) =&gt; { if (flowErr) { return console.error(flowErr); } if (!JSON.parse(stdout).passed) { return this.flow.run(emptyFn, [], {stdio: 'inherit'}); } callback(); }, ['--json']); } /** * Performs linting * * @memberof JS * @instance * @method lint * @param {Array&lt;string&gt;} paths - an array of paths to files/directories to lint * @param {Function} callback - a callback function, invoked only when successfully linted * @example * js.lint(['/path/to/the/input/file.js', '/lint/this/directory/too'], () =&gt; { * // successfully linted * }); */ lint(paths: Array&lt;string&gt;, callback: () =&gt; void) { this.linter.run(paths, linterErr =&gt; { if (!linterErr) { return callback(); } linterErr.forEach(e =&gt; { console.log( '\\x1b[41mESLint error\\x1b[0m &quot;\\x1b[33m%s%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', e.message, e.ruleId ? ` (${e.ruleId})` : '', e.filePath, e.line, e.column); }); console.log('JavaScript linting errors: %s', linterErr.length); }); } /** * Performs static analysis and linting * * @memberof JS * @instance * @private * @method validate * @param {string} inPath - the input file (will also be linted) * @param {Array&lt;string&gt;} lintPaths - an array of paths to files/directories to lint * @param {Function} callback - a callback function, invoked only when successfully validated * @example * js.validate('/path/to/the/input/file.js', ['/lint/this/directory/too'], () =&gt; { * // successfully validated * }); */ validate(inPath: string, lintPaths: Array&lt;string&gt;, callback: () =&gt; void) { this.typecheck(() =&gt; { this.lint(lintPaths.concat([inPath]), callback); }); } /** * Wraps {@link JSCompiler#be} to add static analysis and linting * * @memberOf JS * @instance * @method be * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Array&lt;string&gt;} [lintPaths=[]] - an array of paths to files/directories to lint * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { * // the code has passed all the checks and has been compiled successfully * }); */ be(inPath: string, outPath: string, lintPaths: Array&lt;string&gt; = [], callback: () =&gt; void = emptyFn) { this.validate(inPath, lintPaths, () =&gt; { this.compiler.be(inPath, outPath, callback); }); } /** * Wraps {@link JSCompiler#fe} to add static analysis and linting * * @memberOf JS * @instance * @method fe * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Array&lt;string&gt;} [lintPaths=[]] - an array of paths to files/directories to lint * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { * // the code has passed all the checks and has been compiled successfully * }); */ fe(inPath: string, outPath: string, lintPaths: Array&lt;string&gt; = [], callback: () =&gt; void = emptyFn) { this.validate(inPath, lintPaths, () =&gt; { this.compiler.fe(inPath, outPath, callback); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSCompiler.js.html":{"id":"JSCompiler.js.html","title":"Source: JSCompiler.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: JSCompiler.js /* @flow */ /* @flowignore */ import config from '../config/babel'; import {Compiler} from './Compiler'; import type {ProgramData} from './Compiler'; import {join, extname, dirname, basename} from 'path'; import {readdir, stat, createReadStream, createWriteStream} from 'fs'; import {transformFile} from 'babel-core'; import webpack from 'webpack'; import MemoryFS from 'memory-fs'; import UglifyJS from 'uglify-js'; import autoprefixer from 'autoprefixer'; import importer from 'node-sass-import-once'; /* eslint-disable no-sync */ /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype, precision = 8, cache = {}, fakeFS = new MemoryFS(); /** * A JavaScript compiler * * @class JSCompiler * @extends Compiler * @param {Object} [options={}] - allows to override the default Babel options * @example * import {JSCompiler} from 'webcompiler'; * * const compiler = new JSCompiler(); */ export class JSCompiler extends Compiler { /** * Babel options * * @member {Object} options * @memberOf JSCompiler * @private * @instance */ options: Object; /** * The number of files being compiled at the moment * * @member {number} processing * @memberOf JSCompiler * @private * @instance */ processing: number; constructor(options: Object = {}) { super(); this.options = Object.assign({}, config.env[this.isProduction ? 'production' : 'development'], options); this.processing = 0; } /** * Compiles a directory of files for the back end * * @memberOf JSCompiler * @instance * @private * @method beDir * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.beDir('/path/to/an/input/directory', '/path/to/the/output/directory', callback); */ beDir(inPath: string, outPath: string, callback: () =&gt; void) { readdir(inPath, (readdirErr, files) =&gt; { if (readdirErr) { return console.error(readdirErr); } files.forEach(file =&gt; { this.beTraverse(join(inPath, file), join(outPath, file), callback); }); }); } /** * Compiles a JavaScript file for the back end * * @memberOf JSCompiler * @instance * @private * @method beFile * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.beFile('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ beFile(inPath: string, outPath: string, callback: () =&gt; void) { ++this.processing; transformFile(inPath, this.options, (transformFileErr, result) =&gt; { if (transformFileErr) { return console.error(transformFileErr); } this.fsWrite(outPath, result, callback); }); } /** * Compiles a files * * @memberOf JSCompiler * @instance * @private * @method copyFile * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.copyFile('/path/to/an/input/file', '/path/to/the/output/file', callback); */ copyFile(inPath: string, outPath: string, callback: () =&gt; void) { ++this.processing; this.mkdir(outPath, () =&gt; { createReadStream(inPath).pipe(createWriteStream(outPath)); callback(); }); } /** * Compiles a JavaScript file for the back end or recursively traverses a directory, looking for the JavaScript files * to compile. Non-JavaScript files are simply copied over. * * @memberOf JSCompiler * @instance * @private * @method beTraverse * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.beTraverse('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ beTraverse(inPath: string, outPath: string, callback: () =&gt; void) { stat(inPath, (statErr, stats) =&gt; { if (statErr) { return console.error(statErr); } if (stats.isDirectory()) { this.beDir(inPath, outPath, callback); } else if ('.js' === extname(inPath)) { this.beFile(inPath, outPath, callback); } else { this.copyFile(inPath, outPath, callback); } }); } /** * Minifies the compiled code * * @memberOf JSCompiler * @instance * @method minify * @param {string} path - a path to the file (can be used for the sourceMappingURL comment) * @param {ProgramData} data - the actual program data to compress * @return {ProgramData} processed application code with source maps * @example * const minifiedData = compiler.minify('/path/to/the/output/file.js', data); */ minify(path: string, data: ProgramData): ProgramData { return UglifyJS.minify(data.code, { fromString: true, mangle: false, output: {space_colon: false}, inSourceMap: JSON.parse(data.map), outSourceMap: `${basename(path)}.map` }); } /** * Compiles a JavaScript file or a directory for the back end. Non-JavaScript files are simply copied over. * * @memberOf JSCompiler * @instance * @method be * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ be(inPath: string, outPath: string, callback: () =&gt; void = emptyFn) { if (this.processing) { return console.error('Still working...'); } this.beTraverse(inPath, outPath, () =&gt; { if (!(--this.processing)) { this.done(inPath, callback); } }); } /** * Compiles, bundles (in production mode also minifies and g-zips) a JavaScript file for the front end. * * Supports importing (requiring) `.scss` files inside of JavaScript. * * @memberOf JSCompiler * @instance * @method fe * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} [callback=function () {}] - a callback function * @return {void} * @see {@link https://github.com/css-modules/css-modules|CSS Modules} * @example * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ fe(inPath: string, outPath: string, callback: () =&gt; void = emptyFn) { const compiler = webpack({ cache, debug: true, devtool: 'source-map', entry: inPath, output: {path: dirname(outPath), filename: basename(outPath)}, module: { loaders: [{ test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {cacheDirectory: true, ...this.options} }, { test: /\\.scss$/, loaders: ['style?singleton', 'css?modules&amp;minimize&amp;importLoaders=1&amp;sourceMap', 'postcss', 'sass&amp;sourceMap'] }] }, postcss: () =&gt; [autoprefixer], sassLoader: { importer, importOnce: {index: true, css: false, bower: false}, includePaths: ['node_modules/bootstrap-sass/assets/stylesheets', 'node_modules'], precision } }); if (this.isProduction) { compiler.outputFileSystem = fakeFS; } compiler.run((error, stats) =&gt; { if (error) { return console.error(error); } const jsonStats = stats.toJson(), errors = jsonStats.errors.concat(jsonStats.warnings); if (errors.length) { return errors.forEach(err =&gt; { console.error(err); }); } if (!this.isProduction) { return this.done(inPath, callback); } this.optimize(inPath, outPath, { code: fakeFS.readFileSync(outPath, 'utf8'), map: fakeFS.readFileSync(`${outPath}.map`, 'utf8') }, callback); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSLint.js.html":{"id":"JSLint.js.html","title":"Source: JSLint.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: JSLint.js /* @flow */ import {CLIEngine} from 'eslint'; import {join} from 'path'; /** * The JavaScript linting error object * * @typedef {Object} JSLintError * @property {string} message - the error message * @property {string} [ruleId] - the relative linting rule * @property {string} filePath - the path to a file * @property {number} line - the offending line number * @property {number} column - the offending column number */ type JSLintError = {message: string, ruleId?: string, filePath: string, line: number, column: number}; /** * Invoked on operation success or failure * * @callback JSLintCallback * @param {Array&lt;JSLintError&gt;} [errors] - a collection of error objects */ export type JSLintCallback = (errors: ?Array&lt;JSLintError&gt;) =&gt; void; const configFile = join(__dirname, '..', 'config', 'eslint.yml'); /** * A JavaScript linter * * @class JSLint * @param {Object} [rules={}] - an object that lets you override default linting rules * @example * import {JSLint} from 'webcompiler'; * import {join} from 'path'; * * const linter = new JSLint(); */ export class JSLint { /** * an internal linter instance * * @member {CLIEngine} linter * @memberof JSLint * @private * @instance */ linter: CLIEngine; constructor(rules: Object = {}) { this.linter = new CLIEngine({configFile, rules}); } /** * Execute the linter * * @memberof JSLint * @instance * @method run * @param {Array&lt;string&gt;} paths - an array of paths to files/directories to lint * @param {JSLintCallback} callback - a callback function, accepts 1 argument: an array of error objects or null * @example * // lint &quot;index.js&quot; as well as the entire contents of the &quot;src&quot; directory * linter.run([join(__dirname, 'index.js'), join(__dirname, 'src')], function (err) { * if (err) { * return e.forEach(e =&gt; { * console.log('\\x1b[41mESLint error\\x1b[0m &quot;\\x1b[33m%s%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', * e.message, e.ruleId ? ` (${e.ruleId})` : '', e.filePath, e.line, e.column); * }); * } * // there were no linting errors * }); */ run(paths: Array&lt;string&gt;, callback: JSLintCallback) { const report = this.linter.executeOnFiles(paths), errors = []; report.results.forEach(f =&gt; { f.messages.forEach(e =&gt; { e.filePath = f.filePath; errors.push(e); }); }); callback(errors.length ? errors : null); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"NativeProcess.js.html":{"id":"NativeProcess.js.html","title":"Source: NativeProcess.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: NativeProcess.js /* @flow */ import {spawn} from 'child_process'; /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype; /** * Invoked on operation success or failure * * @callback NativeProcessCallback * @param {string} [stderr] - an error message * @param {string} stdout - the process output */ export type NativeProcessCallback = (stderr: ?string, stdout: string) =&gt; void; /** * Encapsulates a {@link https://nodejs.org/api/child_process.html#child_process_class_childprocess|ChildProcess} * instance of a `task` * * @class NativeProcess * @param {string} task - a process name * @example * import {NativeProcess} from 'webcompiler'; * * const mkdir = new NativeProcess('mkdir'); */ export class NativeProcess { /** * a process name * * @member {string} task * @memberof NativeProcess * @private * @instance */ task: string; /** * a ChildProcess instance * * @member {ChildProcess} proc * @memberof NativeProcess * @private * @instance */ proc: any; constructor(task: string) { this.task = task; } /** * Execute the command * * @memberof NativeProcess * @instance * @method run * @param {NativeProcessCallback} [callback=function () {}] - a callback function * @param {Array&lt;string&gt;} [args=[]] - an array of arguments to pass to the process * @param {Object} [opts={}] - a configuration object for the process * @return {void} * @example * mkdir.run(error =&gt; { * if (error) { * return console.error(error); * } * // created a directory named &quot;example&quot; in cwd * }, ['example']); */ run(callback: NativeProcessCallback = emptyFn, args: Array&lt;string&gt; = [], opts: Object = {}) { if (this.proc) { return callback('Still working...', ''); } this.proc = spawn(this.task, args, opts); let stdout = '', stderr = ''; if (this.proc.stdout) { this.proc.stdout.on('data', data =&gt; { stdout += data; }); } if (this.proc.stderr) { this.proc.stderr.on('data', data =&gt; { stderr += data; }); } this.proc.on('error', error =&gt; { stderr += error.toString(); }); this.proc.on('close', code =&gt; { this.proc = null; callback(code ? stderr : null, stdout); }); } /** * Kills the process if any is running * * @memberof NativeProcess * @instance * @method kill * @example * someEpensiveProcess.kill(); */ kill() { if (this.proc) { this.proc.kill(); this.proc = null; } } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASS.js.html":{"id":"SASS.js.html","title":"Source: SASS.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: SASS.js /* @flow */ import {SASSCompiler} from './SASSCompiler'; import {SASSLint} from './SASSLint'; /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype; /** * SASS compilation tools * * @class SASS * @param {Array&lt;string&gt;} [includePaths=[]] - an array of additional include paths * @param {Array&lt;string&gt;} [excludeLinter=[]] - names of linters to exclude * @param {Object} [importOnceOptions={}] - an object that lets you override default importOnce resolver * configuration * @example * import {SASS} from 'webcompiler'; * * const sass = new SASS(); */ export class SASS { /** * SCSS compiler * * @member {SASSCompiler} compiler * @memberof SASS * @private * @instance */ compiler: SASSCompiler; /** * SCSS linter * * @member {SASSLint} linter * @memberof SASS * @private * @instance */ linter: SASSLint; constructor(includePaths: Array&lt;string&gt; = [], excludeLinter: Array&lt;string&gt; = [], importOnceOptions: Object = {}) { this.compiler = new SASSCompiler(includePaths, importOnceOptions); this.linter = new SASSLint(...excludeLinter); } /** * Performs linting * * @memberof SASS * @instance * @method lint * @param {Array&lt;string&gt;} paths - an array of paths to lint * @param {Function} callback - a callback function * @example * sass.lint(['/path/to/the/input/file.scss', '/lint/this/directory/too'], () =&gt; { * // successfully linted * }); */ lint(paths: Array&lt;string&gt;, callback: () =&gt; void) { this.linter.run(paths, linterErr =&gt; { if (linterErr) { return console.error(linterErr); } callback(); }); } /** * Wraps {@link SASSCompiler#fe} to add linting * * @memberof SASS * @instance * @method fe * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Array&lt;string&gt;} [lintPaths=[]] - an array of paths to files/directories to lint * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { * // the code has passed all the checks and has been compiled successfully * }); */ fe(inPath: string, outPath: string, lintPaths: Array&lt;string&gt; = [], callback: () =&gt; void = emptyFn) { this.lint(lintPaths.concat([inPath]), () =&gt; { this.compiler.fe(inPath, outPath, callback); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASSLint.js.html":{"id":"SASSLint.js.html","title":"Source: SASSLint.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: SASSLint.js /* @flow */ import {NativeProcess} from './NativeProcess'; import type {NativeProcessCallback} from './NativeProcess'; import {join} from 'path'; const config = join(__dirname, '..', 'config', 'scsslint.yml'); /** * A SASS linter * * @class SASSLint * @param {...string} excludeLinter - names of linters to exclude * @example * import {SASSLint} from 'webcompiler'; * import {join} from 'path'; * * const linter = new SASSLint(); */ export class SASSLint { /** * a comma-separated list of linter names to exclude from execution * * @member {string} excludeLinter * @memberof SASSLint * @private * @instance */ excludeLinter: string; /** * a NativeProcess instance for scss-lint * * @member {NativeProcess} proc * @memberof SASSLint * @private * @instance */ proc: NativeProcess; constructor(...excludeLinter: Array&lt;string&gt;) { this.excludeLinter = excludeLinter.join(','); this.proc = new NativeProcess('scss-lint'); } /** * Execute the linter * * @memberof SASSLint * @instance * @method run * @param {Array&lt;string&gt;} paths - an array of paths to files/directories to lint * @param {Function} callback - a callback function, accepts 1 argument: an error message or null * @example * // lint &quot;style.scss&quot; as well as the entire contents of the &quot;sass&quot; directory * linter.run([join(__dirname, 'style.scss'), join(__dirname, 'sass')], error =&gt; { * if (error) { * return console.error(error); * } * // there were no linting errors * }); */ run(paths: Array&lt;string&gt;, callback: NativeProcessCallback) { const args = paths.concat(['-c', config]); if (this.excludeLinter) { args.push('-x', this.excludeLinter); } this.proc.run(callback, args); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"watch.js.html":{"id":"watch.js.html","title":"Source: watch.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: watch.js /* @flow */ import {Client} from 'fb-watchman'; const client = new Client(), ALPHANUMERIC_BASE = 36; /** * Using the Facebook Watchman, watches the directory `dir` for changes of files with extension `type` and runs * `callback` when a change is detected. * * This watcher's only goal is performance, hence the simplicity. * * @function watch * @param {string} dir - a full system path to a directory to watch * @param {string} type - a file extension * @param {Function} callback - a callback function * @see {@link https://facebook.github.io/watchman/|Watchman} * @example * import {watch} from 'webcompiler'; * import {join} from 'path'; * * watch(join(__dirname, 'src'), 'js', someFunction); */ export function watch(dir: string, type: string, callback: () =&gt; void) { const subscription = Date.now().toString(ALPHANUMERIC_BASE); client.capabilityCheck({}, capabilityErr =&gt; { if (capabilityErr) { console.error(capabilityErr); return; } client.command(['watch-project', dir], (watchErr, watchResp) =&gt; { const watcher = watchResp.watch; if (watchErr) { console.error('Error initiating watch:', watchErr); return; } if (watchResp.warning) { console.log('warning: ', watchResp.warning); } client.command(['clock', watcher], (clockErr, clockResp) =&gt; { if (clockErr) { console.error('Failed to query clock:', clockErr); return; } client.command(['subscribe', watcher, subscription, { expression: ['suffix', type], since: clockResp.clock }], subscribeErr =&gt; { if (subscribeErr) { console.error('failed to subscribe: ', subscribeErr); } }); client.on('subscription', subscriptionResp =&gt; { if (subscription === subscriptionResp.subscription) { callback(); } }); }); }); }); } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"yaml.js.html":{"id":"yaml.js.html","title":"Source: yaml.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: yaml.js /* @flow */ import {safeLoad} from 'js-yaml'; import {readFileSync} from 'fs'; /** * Invoked on operation success or failure * * @callback YAMLCallback * @param {string} [error] - an error message * @param {Object} data - the parsed object */ export type YAMLCallback = (error: ?string, data: Object) =&gt; void; /** * Read the contents of a YAML file * * @function yaml * @param {string} filename - the full system path to a YAML file * @param {YAMLCallback} callback - a callback function * @example * import {yaml} from 'webcompiler'; * import {join} from 'path'; * * yaml(join(__dirname, 'config', 'config.yml'), (error, data) =&gt; { * if (error) { * return console.error(error); * } * // the parsed config object * }); */ export function yaml(filename: string, callback: YAMLCallback) { try { const yamlString: string = readFileSync(filename, 'utf8'); callback(null, safeLoad(yamlString, {filename})); } catch (e) { callback(e.toString(), {}); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"global.html":{"id":"global.html","title":"Global","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Global Methods watch(dir, type, callback) Using the Facebook Watchman, watches the directory dir for changes of files with extension type and runs callback when a change is detected. This watcher's only goal is performance, hence the simplicity. Parameters: Name Type Description dir string a full system path to a directory to watch type string a file extension callback function a callback function Source: watch.js, line 8 See: Watchman Example import {watch} from 'webcompiler'; import {join} from 'path'; watch(join(__dirname, 'src'), 'js', someFunction); yaml(filename, callback) Read the contents of a YAML file Parameters: Name Type Description filename string the full system path to a YAML file callback YAMLCallback a callback function Source: yaml.js, line 15 Example import {yaml} from 'webcompiler'; import {join} from 'path'; yaml(join(__dirname, 'config', 'config.yml'), (error, data) =&gt; { if (error) { return console.error(error); } // the parsed config object }); Type Definitions AutoprefixCallback(data) Invoked on operation success or failure Parameters: Name Type Description data ProgramData the parsed object Source: SASSCompiler.js, line 28 CheckBinCallback(file) Invoked on operation success or failure Parameters: Name Type Argument Description file string &lt;optional&gt; a full system path to a file Source: Documentation.js, line 35 DocumentationConfig Processed application code with source maps Type: Object Properties: Name Type Argument Default Description inputDir string &lt;optional&gt; &quot;src&quot; the input application code directory outputDir string &lt;optional&gt; &quot;docs&quot; the output directory for the generated documentation readMe string &lt;optional&gt; &quot;README.md&quot; the documentation &quot;homepage&quot; (README.md file) template string &lt;optional&gt; &quot;node_modules/ink-docstrap/template&quot; a full system path to a valid JSDoc3 template directory jsdocConfig string &lt;optional&gt; &quot;&lt;webcompiler root&gt;/config/jsdoc.json&quot; a full system path to a JSDoc3 configuration file Source: Documentation.js, line 14 FindExecutableCallback(file) Invoked on operation success or failure Parameters: Name Type Description file string a full system path to a file Source: Documentation.js, line 27 JSLintCallback(errors) Invoked on operation success or failure Parameters: Name Type Argument Description errors Array.&lt;JSLintError&gt; &lt;optional&gt; a collection of error objects Source: JSLint.js, line 18 JSLintError The JavaScript linting error object Type: Object Properties: Name Type Argument Description message string the error message ruleId string &lt;optional&gt; the relative linting rule filePath string the path to a file line number the offending line number column number the offending column number Source: JSLint.js, line 6 NativeProcessCallback(stderr, stdout) Invoked on operation success or failure Parameters: Name Type Argument Description stderr string &lt;optional&gt; an error message stdout string the process output Source: NativeProcess.js, line 8 ProgramData Processed application code with source maps Type: Object Properties: Name Type Description code string program code map string source map json string Source: Compiler.js, line 10 YAMLCallback(error, data) Invoked on operation success or failure Parameters: Name Type Argument Description error string &lt;optional&gt; an error message data Object the parsed object Source: yaml.js, line 6 × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Classes Classes Compiler DevServer Documentation JS JSCompiler JSLint NativeProcess SASS SASSCompiler SASSLint × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"index.html":{"id":"index.html","title":"Index","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml webcompilerLint, type-check, compile, package and gzip JavaScript (ES6 + Flow static types + JSX), for the browser as well as NodeJS; lint, compile, auto-prefix, minify and gzip SASS. Project Home | API Docs | Discord Webpack is an amazing tool, however it requires a lot of boilerplate to properly setup and configure, especially when you use it on more than one project. ESLint is constantly updated, new rules are added, APIs are changed. Properly configuring it is a routine and time consuming task, which is completely impractical to perform on each project separately. APIs are sometimes changed without any change in functionality (e.g. Babel 5 vs Babel 6). This project aims to abstract all of those problems out of the development of applications. Prerequisites Facebook Flow SCSS-Lint Watchman A note about Facebook FlowFacebook Flow is a static analysis tool used to check your JavaScript code for possible errors at compile time. It is very smart at understanding your program code, however you should not rely on it being smart enough to just understand your external dependencies too. It can do that, the problem is that a typical NodeJS project can contain hundreds NPM modules, with thousands of JavaScript files. It is a very complicated task, even for a tool that smart, to parse all of them and stay performant enough to not only be usable but useful as well. Which is why it must not be allowed to even try to understand any files that reside in a node_modules directory. Interface Files must be used instead. You can find examples of such interface files, as well as the interface file for the tool itself, in the interfaces directory. Installationnpm i webcompiler --save-devProduction buildsBy default all compilation is done in development mode. If you wish to compile for production just set the NODE_ENV environment variable to &quot;production&quot;, the following additional actions will be performed by the compiler: advanced compilation time optimizations minification (only fe in production mode) g-zip compression (only fe in production mode) Important!The resulting JavaScript and CSS files from fe in production mode are gzip compressed for performance (see Gzip Components), so make sure to provide a &quot;Content-Encoding&quot; header to the browser (e.g. res.setHeader('Content-Encoding', 'gzip');). × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Compiler.html":{"id":"Compiler.html","title":"Class: Compiler","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: Compiler Compiler &lt;abstract&gt; new Compiler() The base compiler class Source: Compiler.js, line 19 Members &lt;readonly&gt; isProduction :boolean True if the NODE_ENV environment variable is equal to production. Caution: modifying it's value directly may lead to unexpected results Type: boolean Source: Compiler.js, line 26 Methods &lt;protected&gt; done(inPath, callback) Executed when the compilation is complete Parameters: Name Type Description inPath string the input path callback function a callback function Source: Compiler.js, line 55 Example compiler.done('/path/to/an/input/file', callback); &lt;protected&gt; fsWrite(path, data, callback) Writes the data to disk Parameters: Name Type Description path string the output path data ProgramData the data to write callback function a callback function Source: Compiler.js, line 72 Example compiler.fsWrite('/path/to/an/output/file', data, callback); &lt;abstract&gt; minify(path, data) Minifies the compiled code Parameters: Name Type Description path string a path to the file (can be used for the sourceMappingURL comment) data ProgramData the actual program data to compress Source: Compiler.js, line 42 Returns: processed application code with source maps or null on error Type ProgramData &lt;protected&gt; mkdir(path, callback) Recursively creates a directory containing a file specified by path. Parameters: Name Type Description path string a path to a file callback function a callback function Source: Compiler.js, line 104 Example compiler.mkdir('/path/to/a/file', callback); &lt;protected&gt; optimize(inPath, outPath, data, callback) Minifies and g-zips the program Parameters: Name Type Description inPath string the input path outPath string the output path data ProgramData processed application code with source maps callback function a callback function Source: Compiler.js, line 125 Example compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"DevServer.html":{"id":"DevServer.html","title":"Class: DevServer","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: DevServer DevServer new DevServer(script, style, devDir, port, react) A lightweight development server that rapidly recompiles the JavaScript and SASS files when they are edited and updates the page. Utilizes the Webpack development server. Includes react hot loader to further optimize the development process of the React applications. Please install and enable the LiveReload browser extension for the CSS reloading to work. Parameters: Name Type Argument Default Description script string a full system path to a JavaScript file style string a full system path to a SASS file devDir string a full system path to a directory in which to put any compiled development resources port number &lt;optional&gt; 3000 a port at which to start the dev server react boolean &lt;optional&gt; true false to disable the react hot loader plugin Source: DevServer.js, line 13 See: React Hot Loader Example import {DevServer} from 'webcompiler'; import {join} from 'path'; const rootDir = join(__dirname, '..'), devDir = join(rootDir, 'development'), server = new DevServer(join(devDir, 'script.js'), join(devDir, 'app.scss'), devDir); server.run(rootDir); // now navigate to http://localhost:3000 using your favorite browser ( preferably Chrome :) ) Methods run(watchDir) Starts the Webpack development server, compiles SASS and starts watching for file changes Parameters: Name Type Description watchDir string the directory in which to watch for the changes in the SASS files Source: DevServer.js, line 181 Example server.run('/path/to/some/directory'); watchJS() Starts the Webpack development server Source: DevServer.js, line 161 Example server.watchJS(); watchSASS(watchDir) Compile SASS and start watching for file changes Parameters: Name Type Description watchDir string the directory in which to watch for the changes in the SASS files Source: DevServer.js, line 145 Example server.watchSASS('/path/to/some/directory'); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Documentation.html":{"id":"Documentation.html","title":"Class: Documentation","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: Documentation Documentation new Documentation(config) Generates API documentation The default JSDoc plugin specified in jsdocConfig strips out all of the code from a file while retaining newlines (unlike the built in commentsOnly plugin that ships with JSDoc3). That way: line numbers are preserved in the source view you don't need to use a pre-compiler, you will always see the same code as you wrote in the docs source view since JSDoc only sees comments you can use any code syntax you like - ES2015, ES7, JSX, it doesn't even have to be JavaScript. The markdown plugin is also included by default. Parameters: Name Type Argument Default Description config DocumentationConfig &lt;optional&gt; {} a configuration object Source: Documentation.js, line 43 Example import {Documentation} from 'webcompiler'; const docs = new Documentation(); Methods run(callback) Generate the documentation Parameters: Name Type Argument Default Description callback function &lt;optional&gt; function () {} a callback function Source: Documentation.js, line 134 Returns: Type void Example docs.run(() =&gt; { // generated the API documentation }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JS.html":{"id":"JS.html","title":"Class: JS","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: JS JS new JS(babelOptions, lintRules) JavaScript compilation tools Parameters: Name Type Argument Default Description babelOptions Object &lt;optional&gt; {} allows to override the default Babel options lintRules Object &lt;optional&gt; {} allows to override the default linting rules Source: JS.js, line 10 Example import {JS} from 'webcompiler'; const js = new JS(); Methods be(inPath, outPath, lintPaths, callback) Wraps JSCompiler#be to add static analysis and linting Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path lintPaths Array.&lt;string&gt; &lt;optional&gt; [] an array of paths to files/directories to lint callback function &lt;optional&gt; function () {} a callback function Source: JS.js, line 130 Returns: Type void Example compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { // the code has passed all the checks and has been compiled successfully }); fe(inPath, outPath, lintPaths, callback) Wraps JSCompiler#fe to add static analysis and linting Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path lintPaths Array.&lt;string&gt; &lt;optional&gt; [] an array of paths to files/directories to lint callback function &lt;optional&gt; function () {} a callback function Source: JS.js, line 152 Returns: Type void Example compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { // the code has passed all the checks and has been compiled successfully }); lint(paths, callback) Performs linting Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to files/directories to lint callback function a callback function, invoked only when successfully linted Source: JS.js, line 82 Example js.lint(['/path/to/the/input/file.js', '/lint/this/directory/too'], () =&gt; { // successfully linted }); typecheck(callback) Performs static analysis Parameters: Name Type Description callback function a callback function, invoked only when successfully typechecked Source: JS.js, line 58 Example js.typecheck(() =&gt; { // successfully typechecked }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSCompiler.html":{"id":"JSCompiler.html","title":"Class: JSCompiler","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: JSCompiler JSCompiler new JSCompiler(options) A JavaScript compiler Parameters: Name Type Argument Default Description options Object &lt;optional&gt; {} allows to override the default Babel options Source: JSCompiler.js, line 24 Example import {JSCompiler} from 'webcompiler'; const compiler = new JSCompiler(); Extends Compiler Members &lt;readonly&gt; isProduction :boolean True if the NODE_ENV environment variable is equal to production. Caution: modifying it's value directly may lead to unexpected results Type: boolean Inherited From: Compiler#isProduction Source: Compiler.js, line 26 Methods be(inPath, outPath, callback) Compiles a JavaScript file or a directory for the back end. Non-JavaScript files are simply copied over. Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path callback function &lt;optional&gt; function () {} a callback function Source: JSCompiler.js, line 181 Returns: Type void Example compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); &lt;protected&gt; done(inPath, callback) Executed when the compilation is complete Parameters: Name Type Description inPath string the input path callback function a callback function Inherited From: Compiler#done Source: Compiler.js, line 55 Example compiler.done('/path/to/an/input/file', callback); fe(inPath, outPath, callback) Compiles, bundles (in production mode also minifies and g-zips) a JavaScript file for the front end. Supports importing (requiring) .scss files inside of JavaScript. Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path callback function &lt;optional&gt; function () {} a callback function Source: JSCompiler.js, line 205 See: CSS Modules Returns: Type void Example compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); &lt;protected&gt; fsWrite(path, data, callback) Writes the data to disk Parameters: Name Type Description path string the output path data ProgramData the data to write callback function a callback function Inherited From: Compiler#fsWrite Source: Compiler.js, line 72 Example compiler.fsWrite('/path/to/an/output/file', data, callback); minify(path, data) Minifies the compiled code Parameters: Name Type Description path string a path to the file (can be used for the sourceMappingURL comment) data ProgramData the actual program data to compress Overrides: Compiler#minify Source: JSCompiler.js, line 159 Returns: processed application code with source maps Type ProgramData Example const minifiedData = compiler.minify('/path/to/the/output/file.js', data); &lt;protected&gt; mkdir(path, callback) Recursively creates a directory containing a file specified by path. Parameters: Name Type Description path string a path to a file callback function a callback function Inherited From: Compiler#mkdir Source: Compiler.js, line 104 Example compiler.mkdir('/path/to/a/file', callback); &lt;protected&gt; optimize(inPath, outPath, data, callback) Minifies and g-zips the program Parameters: Name Type Description inPath string the input path outPath string the output path data ProgramData processed application code with source maps callback function a callback function Inherited From: Compiler#optimize Source: Compiler.js, line 125 Example compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSLint.html":{"id":"JSLint.html","title":"Class: JSLint","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: JSLint JSLint new JSLint(rules) A JavaScript linter Parameters: Name Type Argument Default Description rules Object &lt;optional&gt; {} an object that lets you override default linting rules Source: JSLint.js, line 28 Example import {JSLint} from 'webcompiler'; import {join} from 'path'; const linter = new JSLint(); Methods run(paths, callback) Execute the linter Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to files/directories to lint callback JSLintCallback a callback function, accepts 1 argument: an array of error objects or null Source: JSLint.js, line 54 Example // lint &quot;index.js&quot; as well as the entire contents of the &quot;src&quot; directory linter.run([join(__dirname, 'index.js'), join(__dirname, 'src')], function (err) { if (err) { return e.forEach(e =&gt; { console.log('\\x1b[41mESLint error\\x1b[0m &quot;\\x1b[33m%s%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', e.message, e.ruleId ? ` (${e.ruleId})` : '', e.filePath, e.line, e.column); }); } // there were no linting errors }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"NativeProcess.html":{"id":"NativeProcess.html","title":"Class: NativeProcess","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: NativeProcess NativeProcess new NativeProcess(task) Encapsulates a ChildProcess instance of a task Parameters: Name Type Description task string a process name Source: NativeProcess.js, line 17 Example import {NativeProcess} from 'webcompiler'; const mkdir = new NativeProcess('mkdir'); Methods kill() Kills the process if any is running Source: NativeProcess.js, line 98 Example someEpensiveProcess.kill(); run(callback, args, opts) Execute the command Parameters: Name Type Argument Default Description callback NativeProcessCallback &lt;optional&gt; function () {} a callback function args Array.&lt;string&gt; &lt;optional&gt; [] an array of arguments to pass to the process opts Object &lt;optional&gt; {} a configuration object for the process Source: NativeProcess.js, line 53 Returns: Type void Example mkdir.run(error =&gt; { if (error) { return console.error(error); } // created a directory named &quot;example&quot; in cwd }, ['example']); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASS.html":{"id":"SASS.html","title":"Class: SASS","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: SASS SASS new SASS(includePaths, excludeLinter, importOnceOptions) SASS compilation tools Parameters: Name Type Argument Default Description includePaths Array.&lt;string&gt; &lt;optional&gt; [] an array of additional include paths excludeLinter Array.&lt;string&gt; &lt;optional&gt; [] names of linters to exclude importOnceOptions Object &lt;optional&gt; {} an object that lets you override default importOnce resolver configuration Source: SASS.js, line 9 Example import {SASS} from 'webcompiler'; const sass = new SASS(); Methods fe(inPath, outPath, lintPaths, callback) Wraps SASSCompiler#fe to add linting Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path lintPaths Array.&lt;string&gt; &lt;optional&gt; [] an array of paths to files/directories to lint callback function &lt;optional&gt; function () {} a callback function Source: SASS.js, line 70 Returns: Type void Example compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { // the code has passed all the checks and has been compiled successfully }); lint(paths, callback) Performs linting Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to lint callback function a callback function Source: SASS.js, line 48 Example sass.lint(['/path/to/the/input/file.scss', '/lint/this/directory/too'], () =&gt; { // successfully linted }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASSCompiler.html":{"id":"SASSCompiler.html","title":"Class: SASSCompiler","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: SASSCompiler SASSCompiler new SASSCompiler(includePaths, importOnceOptions) A SASS compiler Parameters: Name Type Argument Default Description includePaths Array.&lt;string&gt; &lt;optional&gt; [] an array of additional include paths importOnceOptions Object &lt;optional&gt; {} an object that lets you override default importOnce resolver configuration Source: SASSCompiler.js, line 36 Example import {SASSCompiler} from 'webcompiler'; const compiler = new SASSCompiler(); Extends Compiler Members &lt;readonly&gt; isProduction :boolean True if the NODE_ENV environment variable is equal to production. Caution: modifying it's value directly may lead to unexpected results Type: boolean Inherited From: Compiler#isProduction Source: Compiler.js, line 26 Methods autoprefix(path, data, callback) Auto-prefixes the compiled code Parameters: Name Type Description path string a path to the file data ProgramData the actual program data to auto-prefix callback AutoprefixCallback a callback function Source: SASSCompiler.js, line 107 Example compiler.autoprefix('/path/to/the/output/file.css', data, result =&gt; { // successfully added the vendor prefixes }); &lt;protected&gt; done(inPath, callback) Executed when the compilation is complete Parameters: Name Type Description inPath string the input path callback function a callback function Inherited From: Compiler#done Source: Compiler.js, line 55 Example compiler.done('/path/to/an/input/file', callback); fe(inPath, outPath, callback) Compiles, auto-prefixes and optionally minifies and g-zips in the production mode Parameters: Name Type Argument Default Description inPath string a full system path to the input file outPath string a full system path to the output file callback function &lt;optional&gt; function () {} a callback function Source: SASSCompiler.js, line 138 Example compiler.fe('/path/to/the/input/file.scss', '/path/to/the/output/file.css', () =&gt; { // compiled successfully }); &lt;protected&gt; fsWrite(path, data, callback) Writes the data to disk Parameters: Name Type Description path string the output path data ProgramData the data to write callback function a callback function Inherited From: Compiler#fsWrite Source: Compiler.js, line 72 Example compiler.fsWrite('/path/to/an/output/file', data, callback); minify(path, data) Minifies the compiled code Parameters: Name Type Description path string a path to the file (can be used for the sourceMappingURL comment) data ProgramData the actual program data to compress Overrides: Compiler#minify Source: SASSCompiler.js, line 76 Returns: processed application code with source maps or null on error Type ProgramData Example const minifiedData = compiler.minify('/path/to/the/output/file.css', data); &lt;protected&gt; mkdir(path, callback) Recursively creates a directory containing a file specified by path. Parameters: Name Type Description path string a path to a file callback function a callback function Inherited From: Compiler#mkdir Source: Compiler.js, line 104 Example compiler.mkdir('/path/to/a/file', callback); &lt;protected&gt; optimize(inPath, outPath, data, callback) Minifies and g-zips the program Parameters: Name Type Description inPath string the input path outPath string the output path data ProgramData processed application code with source maps callback function a callback function Inherited From: Compiler#optimize Source: Compiler.js, line 125 Example compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASSLint.html":{"id":"SASSLint.html","title":"Class: SASSLint","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: SASSLint SASSLint new SASSLint(excludeLinter) A SASS linter Parameters: Name Type Argument Description excludeLinter string &lt;repeatable&gt; names of linters to exclude Source: SASSLint.js, line 9 Example import {SASSLint} from 'webcompiler'; import {join} from 'path'; const linter = new SASSLint(); Methods run(paths, callback) Execute the linter Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to files/directories to lint callback function a callback function, accepts 1 argument: an error message or null Source: SASSLint.js, line 46 Example // lint &quot;style.scss&quot; as well as the entire contents of the &quot;sass&quot; directory linter.run([join(__dirname, 'style.scss'), join(__dirname, 'sass')], error =&gt; { if (error) { return console.error(error); } // there were no linting errors }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "}}
+    {"SASSCompiler.js.html":{"id":"SASSCompiler.js.html","title":"Source: SASSCompiler.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: SASSCompiler.js /* @flow */ import {Compiler} from './Compiler'; import type {ProgramData} from './Compiler'; import {render} from 'node-sass'; import importer from 'node-sass-import-once'; import CleanCSS from 'clean-css'; import postcss from 'postcss'; import autoprefixer from 'autoprefixer'; const precision = 8, roundingPrecision = -1, sourceMappingURLPattern = /\\n*\\/\\*# sourceMappingURL=\\S+ \\*\\//, options = { file: null, outFile: null, importer, importOnce: {index: true, css: false, bower: false}, includePaths: ['node_modules/bootstrap-sass/assets/stylesheets', 'node_modules'], precision, sourceMap: true, sourceMapContents: true }, /* @flowignore */ emptyFn: () =&gt; void = Function.prototype; /** * Invoked on operation success or failure * * @callback AutoprefixCallback * @param {ProgramData} data - the parsed object */ type AutoprefixCallback = (data: ProgramData) =&gt; void; /** * A SASS compiler * * @class SASSCompiler * @extends Compiler * @param {Array&lt;string&gt;} [includePaths=[]] - an array of additional include paths * @param {Object} [importOnceOptions={}] - an object that lets you override default importOnce resolver * configuration * @example * import {SASSCompiler} from 'webcompiler'; * * const compiler = new SASSCompiler(); */ export class SASSCompiler extends Compiler { /** * an array of paths to search for an scss file in if it's not found in cwd * * @member {Array&lt;string&gt;} includePaths * @memberof SASSCompiler * @private * @instance */ includePaths: Array&lt;string&gt;; /** * importOnce resolver configuration * * @member {Object} importOnce * @memberof SASSCompiler * @private * @instance */ importOnce: Object; constructor(includePaths: Array&lt;string&gt; = [], importOnceOptions: Object = {}) { super(); this.includePaths = options.includePaths.concat(includePaths); this.importOnce = Object.assign({}, options.importOnce, importOnceOptions); } /** * Minifies the compiled code * * @memberOf SASSCompiler * @instance * @method minify * @param {string} path - a path to the file (can be used for the sourceMappingURL comment) * @param {ProgramData} data - the actual program data to compress * @return {ProgramData} processed application code with source maps or null on error * @example * const minifiedData = compiler.minify('/path/to/the/output/file.css', data); */ minify(path: string, data: ProgramData): ?ProgramData { const sourceMappingURL = data.code.match(sourceMappingURLPattern), minified = new CleanCSS({ keepSpecialComments: 0, roundingPrecision, sourceMap: data.map, sourceMapInlineSources: true }).minify(data.code), errors = minified.errors.concat(minified.warnings); if (errors.length) { errors.forEach(error =&gt; { console.error(error); }); return null; } return {code: `${minified.styles}${sourceMappingURL ? sourceMappingURL[0] : ''}`, map: minified.sourceMap}; } /** * Auto-prefixes the compiled code * * @memberOf SASSCompiler * @instance * @method autoprefix * @param {string} path - a path to the file * @param {ProgramData} data - the actual program data to auto-prefix * @param {AutoprefixCallback} callback - a callback function * @example * compiler.autoprefix('/path/to/the/output/file.css', data, result =&gt; { * // successfully added the vendor prefixes * }); */ autoprefix(path: string, data: ProgramData, callback: AutoprefixCallback) { postcss([autoprefixer]).process(data.code, { from: path, to: path, map: {prev: data.map} }).then(result =&gt; { const warnings = result.warnings(); if (warnings.length) { return warnings.forEach(warning =&gt; { console.error(warning.toString()); }); } callback({code: result.css, map: JSON.stringify(result.map)}); }); } /** * Compiles, auto-prefixes and optionally minifies and g-zips in the production mode * * @memberof SASSCompiler * @instance * @method fe * @param {string} inPath - a full system path to the input file * @param {string} outPath - a full system path to the output file * @param {Function} [callback=function () {}] - a callback function * @example * compiler.fe('/path/to/the/input/file.scss', '/path/to/the/output/file.css', () =&gt; { * // compiled successfully * }); */ fe(inPath: string, outPath: string, callback: () =&gt; void = emptyFn) { render(Object.assign({}, options, { file: inPath, outFile: outPath, importOnce: this.importOnce, includePaths: this.includePaths }), (error, result) =&gt; { if (error) { return console.log( '\\x1b[41mSASS error\\x1b[0m &quot;\\x1b[33m%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', error.message, error.file, error.line, error.column); } this.autoprefix(outPath, {code: result.css, map: result.map.toString()}, data =&gt; { if (this.isProduction) { return this.optimize(inPath, outPath, data, callback); } this.fsWrite(outPath, data, () =&gt; { this.done(inPath, callback); }); }); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Documentation.js.html":{"id":"Documentation.js.html","title":"Source: Documentation.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: Documentation.js /* @flow */ import {NativeProcess} from './NativeProcess'; import {stat} from 'fs'; import {join} from 'path'; const npm = new NativeProcess('npm'), defaultConfig = join(__dirname, '..', 'config', 'jsdoc.json'), cwd = process.cwd(), /* @flowignore */ emptyFn: () =&gt; void = Function.prototype; /** * Processed application code with source maps * * @typedef {Object} DocumentationConfig * @property {string} [inputDir=&quot;src&quot;] - the input application code directory * @property {string} [outputDir=&quot;docs&quot;] - the output directory for the generated documentation * @property {string} [readMe=&quot;README.md&quot;] - the documentation &quot;homepage&quot; (README.md file) * @property {string} [template=&quot;node_modules/ink-docstrap/template&quot;] - a full system path to a valid JSDoc3 * template directory * @property {string} [jsdocConfig=&quot;&lt;webcompiler root&gt;/config/jsdoc.json&quot;] - a full system path to a JSDoc3 * configuration file */ /** * Invoked on operation success or failure * * @callback FindExecutableCallback * @param {string} file - a full system path to a file */ type FindExecutableCallback = (file: string) =&gt; void; /** * Invoked on operation success or failure * * @callback CheckBinCallback * @param {string} [file] - a full system path to a file */ export type CheckBinCallback = (file: ?string) =&gt; void; /** * Generates API documentation * * The default JSDoc plugin specified in `jsdocConfig` strips out all of the code from a file while retaining newlines * (unlike the built in `commentsOnly` plugin that ships with JSDoc3). * * That way: * 1. line numbers are preserved in the source view * 2. you don't need to use a pre-compiler, you will always see the same code as you wrote in the docs source view * 3. since JSDoc only sees comments you can use any code syntax you like - ES2015, ES7, JSX, it doesn't even have to be * JavaScript. * * The markdown plugin is also included by default. * * @class Documentation * @param {DocumentationConfig} [config={}] - a configuration object * @example * import {Documentation} from 'webcompiler'; * * const docs = new Documentation(); */ export class Documentation { /** * JSDoc3 * * @member {NativeProcess} jsdoc * @memberof Documentation * @private * @instance */ jsdoc: ?NativeProcess; /** * the input application code directory * * @member {string} inputDir * @memberof Documentation * @private * @instance */ inputDir: string; /** * the output directory for the generated documentation * * @member {string} outputDir * @memberof Documentation * @private * @instance */ outputDir: string; /** * the documentation &quot;homepage&quot; (README.md file) * * @member {string} readMe * @memberof Documentation * @private * @instance */ readMe: string; /** * a full system path to a valid JSDoc3 template directory * * @member {string} template * @memberof Documentation * @private * @instance */ template: string; /** * a full system path to a JSDoc3 configuration file * * @member {string} jsdocConfig * @memberof Documentation * @private * @instance */ jsdocConfig: string; constructor({inputDir, outputDir, readMe, template, jsdocConfig}: {inputDir?: string, outputDir?: string, readMe?: string, template?: string, jsdocConfig?: string} = {}) { this.inputDir = inputDir || join(cwd, 'src'); this.outputDir = outputDir || join(cwd, 'docs'); this.readMe = readMe || join(cwd, 'README.md'); this.template = template || join(cwd, 'node_modules', 'ink-docstrap', 'template'); this.jsdocConfig = jsdocConfig || defaultConfig; } /** * Generate the documentation * * @memberof Documentation * @instance * @method run * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * docs.run(() =&gt; { * // generated the API documentation * }); */ run(callback: () =&gt; void = emptyFn) { if (this.jsdoc) { return this.doRun(this.jsdoc, callback); } this.findExecutable(file =&gt; { this.jsdoc = new NativeProcess(file); this.doRun(this.jsdoc, callback); }); } /** * Given a JSDoc3 executable, generate the documentation * * @memberof Documentation * @instance * @private * @method doRun * @param {NativeProcess} jsdoc - JSDoc3 * @param {Function} callback - a callback function * @example * docs.doRun(jsdoc, () =&gt; { * // generated the API documentation * }); */ doRun(jsdoc: NativeProcess, callback: () =&gt; void) { jsdoc.run(stderr =&gt; { if (stderr) { return console.error(stderr); } callback(); }, [this.inputDir, '-d', this.outputDir, '-R', this.readMe, '-c', this.jsdocConfig, '-t', this.template]); } /** * Finds a path to the JSDoc3 executable * * @memberof Documentation * @instance * @private * @method findExecutable * @param {FindExecutableCallback} callback - a callback function * @example * docs.findExecutable(file =&gt; { * // the jsdoc file is found * }); */ findExecutable(callback: FindExecutableCallback) { this.checkBin(localFile =&gt; { if (localFile) { return callback(localFile); } this.checkBin(globalFile =&gt; { if (globalFile) { return callback(globalFile); } console.error('Failed to locate the jsdoc executable'); }, true); }); } /** * Checks the NPM bin directories to see if they contain a file named jsdoc * * @memberof Documentation * @instance * @private * @method checkBin * @param {CheckBinCallback} callback - a callback function * @param {globalPackage} [boolean=false] - if true checks the global NPM bin directory (contains the npm * executable itself) * @example * docs.checkBin(file =&gt; { * if (file) { * // the jsdoc file is found * } * }); */ checkBin(callback: CheckBinCallback, globalPackage: boolean = false) { const args = ['bin']; if (globalPackage) { args.push('-g'); } npm.run((stderr, stdout) =&gt; { if (stderr) { console.error(stderr); return callback(null); } const path = join(stdout.replace(/\\n$/, ''), 'jsdoc'); stat(path, err =&gt; { callback(err ? null : path); }); }, args); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Compiler.js.html":{"id":"Compiler.js.html","title":"Source: Compiler.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: Compiler.js /* @flow */ import mkdirp from 'mkdirp'; import {dirname} from 'path'; import {writeFile} from 'fs'; import {gzip} from 'zlib'; let i = 0; /** * Processed application code with source maps * * @typedef {Object} ProgramData * @property {string} code - program code * @property {string} map - source map json string */ export type ProgramData = {code: string, map: string}; /** * The base compiler class * * @class Compiler * @abstract */ export class Compiler { /** * True if the NODE_ENV environment variable is equal to `production`. * * Caution: modifying it's value directly may lead to unexpected results * * @member {boolean} isProduction * @memberof Compiler * @readOnly * @instance */ isProduction: boolean; constructor() { this.isProduction = 'production' === process.env.NODE_ENV; } /** * Minifies the compiled code * * @memberOf Compiler * @instance * @abstract * @method minify * @param {string} path - a path to the file (can be used for the sourceMappingURL comment) * @param {ProgramData} data - the actual program data to compress * @return {ProgramData} processed application code with source maps or null on error */ minify: (path: string, data: ProgramData) =&gt; ?ProgramData; /** * Executed when the compilation is complete * * @memberOf Compiler * @instance * @protected * @method done * @param {string} inPath - the input path * @param {Function} callback - a callback function * @example * compiler.done('/path/to/an/input/file', callback); */ done(inPath: string, callback: () =&gt; void) { console.log('\\x1b[32m%s. Compiled %s\\x1b[0m', ++i, inPath); callback(); } /** * Writes the data to disk * * @memberOf Compiler * @instance * @protected * @method fsWrite * @param {string} path - the output path * @param {ProgramData} data - the data to write * @param {Function} callback - a callback function * @example * compiler.fsWrite('/path/to/an/output/file', data, callback); */ fsWrite(path: string, data: ProgramData, callback: () =&gt; void) { this.mkdir(path, () =&gt; { writeFile(path, data.code, scriptErr =&gt; { if (scriptErr) { return console.error(scriptErr); } if (!data.map) { return callback(); } writeFile(`${path}.map`, data.map, mapErr =&gt; { if (mapErr) { return console.error(mapErr); } callback(); }); }); }); } /** * Recursively creates a directory containing a file specified by `path`. * * @memberOf Compiler * @instance * @protected * @method mkdir * @param {string} path - a path to a file * @param {Function} callback - a callback function * @example * compiler.mkdir('/path/to/a/file', callback); */ mkdir(path: string, callback: () =&gt; void) { mkdirp(dirname(path), mkdirpErr =&gt; { if (mkdirpErr) { return console.error(mkdirpErr); } callback(); }); } /** * Minifies and g-zips the program * * @memberOf Compiler * @instance * @protected * @method optimize * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {ProgramData} data - processed application code with source maps * @param {Function} callback - a callback function * @example * compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); */ optimize(inPath: string, outPath: string, data: ProgramData, callback: () =&gt; void) { const minified = this.minify(outPath, data); if (!minified) { return; } gzip(minified.code, (gzipErr, code) =&gt; { if (gzipErr) { return console.error(gzipErr); } this.fsWrite(outPath, {code, map: minified.map}, () =&gt; { this.done(inPath, callback); }); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"DevServer.js.html":{"id":"DevServer.js.html","title":"Source: DevServer.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: DevServer.js /* @flow */ import {SASSCompiler} from './SASSCompiler'; import {watch} from './watch'; import tinylr from 'tiny-lr'; import WebpackDevServer from 'webpack-dev-server'; import webpack from 'webpack'; import {join} from 'path'; const LIVERELOAD_PORT = 35729, WEB_PORT = 3000; /** * A lightweight development server that rapidly recompiles the JavaScript and SASS files when they are edited and * updates the page. * * Utilizes the Webpack development server. * * Includes react hot loader to further optimize the development process of the React applications. * * Please install and enable the LiveReload browser extension for the CSS reloading to work. * * @class DevServer * @param {string} script - a full system path to a JavaScript file * @param {string} style - a full system path to a SASS file * @param {string} devDir - a full system path to a directory in which to put any compiled development resources * @param {number} [port=3000] - a port at which to start the dev server * @param {boolean} [react=true] - false to disable the react hot loader plugin * @see {@link http://gaearon.github.io/react-hot-loader/|React Hot Loader} * @example * import {DevServer} from 'webcompiler'; * import {join} from 'path'; * * const rootDir = join(__dirname, '..'), * devDir = join(rootDir, 'development'), * server = new DevServer(join(devDir, 'script.js'), join(devDir, 'app.scss'), devDir); * * server.run(rootDir); * // now navigate to http://localhost:3000 using your favorite browser ( preferably Chrome :) ) */ export class DevServer { /** * a port at which to start the dev server * * @member {number} port * @memberof DevServer * @private * @instance */ port: number; /** * a LiveReload server * * @member {tinylr.Server} lr * @memberof DevServer * @private * @instance */ lr: tinylr.Server; /** * recompiles SASS and notifies LiveReload * * @method compileSASS * @memberof DevServer * @private * @instance */ compileSASS: () =&gt; void; /** * the Webpack development server * * @member {WebpackDevServer} server * @memberof DevServer * @private * @instance */ server: WebpackDevServer; constructor(script: string, style: string, devDir: string, port: number = WEB_PORT, react: boolean = true) { const sass = new SASSCompiler(), loaders = []; if (react) { loaders.push('react-hot'); } loaders.push('babel'); this.port = port; this.lr = tinylr(); this.compileSASS = sass.fe.bind(sass, style, join(devDir, 'style.css'), () =&gt; { this.lr.changed({body: {files: ['style.css']}}); }); this.server = new WebpackDevServer(webpack({ cache: {}, debug: true, devtool: 'eval-source-map', entry: [ `webpack-dev-server/client?http://localhost:${this.port}`, 'webpack/hot/only-dev-server', script ], output: { path: devDir, filename: 'script.js', publicPath: '/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [{ test: /\\.js$/, exclude: /node_modules/, loaders }] } }), { contentBase: devDir, publicPath: '/', hot: true, historyApiFallback: true }); this.server.app.get('*', (req, res) =&gt; { res.send(`&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;title&gt;Development server - Webcompiler&lt;/title&gt; &lt;link href=&quot;/style.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt;&lt;/div&gt; &lt;script src=&quot;/script.js&quot; async defer&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;`); }); } /** * Compile SASS and start watching for file changes * * @memberof DevServer * @instance * @method watchSASS * @param {string} watchDir - the directory in which to watch for the changes in the SASS files * @example * server.watchSASS('/path/to/some/directory'); */ watchSASS(watchDir: string) { this.lr.listen(LIVERELOAD_PORT); this.compileSASS(); watch(watchDir, 'scss', this.compileSASS); } /** * Starts the Webpack development server * * @memberof DevServer * @instance * @method watchJS * @example * server.watchJS(); */ watchJS() { const port = this.port; this.server.listen(port, '0.0.0.0', error =&gt; { if (error) { return console.error(error); } console.log(`Started the development server at localhost:${port}`); }); } /** * Starts the Webpack development server, compiles SASS and starts watching for file changes * * @memberof DevServer * @instance * @method run * @param {string} watchDir - the directory in which to watch for the changes in the SASS files * @example * server.run('/path/to/some/directory'); */ run(watchDir: string) { this.watchJS(); this.watchSASS(watchDir); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JS.js.html":{"id":"JS.js.html","title":"Source: JS.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: JS.js /* @flow */ import {JSCompiler} from './JSCompiler'; import {NativeProcess} from './NativeProcess'; import {JSLint} from './JSLint'; /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype; /** * JavaScript compilation tools * * @class JS * @param {Object} [babelOptions={}] - allows to override the default Babel options * @param {Object} [lintRules={}] - allows to override the default linting rules * @example * import {JS} from 'webcompiler'; * * const js = new JS(); */ export class JS { /** * JavaScript compiler * * @member {JSCompiler} compiler * @memberof JS * @private * @instance */ compiler: JSCompiler; /** * flow static analyzer * * @member {NativeProcess} flow * @memberof JS * @private * @instance */ flow: NativeProcess; /** * JavaScript linter * * @member {JSLint} linter * @memberof JS * @private * @instance */ linter: JSLint; constructor(babelOptions: Object = {}, lintRules: Object = {}) { this.compiler = new JSCompiler(babelOptions); this.flow = new NativeProcess('flow'); this.linter = new JSLint(lintRules); } /** * Performs static analysis * * @memberof JS * @instance * @method typecheck * @param {Function} callback - a callback function, invoked only when successfully typechecked * @example * js.typecheck(() =&gt; { * // successfully typechecked * }); */ typecheck(callback: () =&gt; void) { this.flow.run((flowErr, stdout) =&gt; { if (flowErr) { return console.error(flowErr); } if (!JSON.parse(stdout).passed) { return this.flow.run(emptyFn, [], {stdio: 'inherit'}); } callback(); }, ['--json']); } /** * Performs linting * * @memberof JS * @instance * @method lint * @param {Array&lt;string&gt;} paths - an array of paths to files/directories to lint * @param {Function} callback - a callback function, invoked only when successfully linted * @example * js.lint(['/path/to/the/input/file.js', '/lint/this/directory/too'], () =&gt; { * // successfully linted * }); */ lint(paths: Array&lt;string&gt;, callback: () =&gt; void) { this.linter.run(paths, linterErr =&gt; { if (!linterErr) { return callback(); } linterErr.forEach(e =&gt; { console.log( '\\x1b[41mESLint error\\x1b[0m &quot;\\x1b[33m%s%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', e.message, e.ruleId ? ` (${e.ruleId})` : '', e.filePath, e.line, e.column); }); console.log('JavaScript linting errors: %s', linterErr.length); }); } /** * Performs static analysis and linting * * @memberof JS * @instance * @private * @method validate * @param {string} inPath - the input file (will also be linted) * @param {Array&lt;string&gt;} lintPaths - an array of paths to files/directories to lint * @param {Function} callback - a callback function, invoked only when successfully validated * @example * js.validate('/path/to/the/input/file.js', ['/lint/this/directory/too'], () =&gt; { * // successfully validated * }); */ validate(inPath: string, lintPaths: Array&lt;string&gt;, callback: () =&gt; void) { this.typecheck(() =&gt; { this.lint(lintPaths.concat([inPath]), callback); }); } /** * Wraps {@link JSCompiler#be} to add static analysis and linting * * @memberOf JS * @instance * @method be * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Array&lt;string&gt;} [lintPaths=[]] - an array of paths to files/directories to lint * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { * // the code has passed all the checks and has been compiled successfully * }); */ be(inPath: string, outPath: string, lintPaths: Array&lt;string&gt; = [], callback: () =&gt; void = emptyFn) { this.validate(inPath, lintPaths, () =&gt; { this.compiler.be(inPath, outPath, callback); }); } /** * Wraps {@link JSCompiler#fe} to add static analysis and linting * * @memberOf JS * @instance * @method fe * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Array&lt;string&gt;} [lintPaths=[]] - an array of paths to files/directories to lint * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { * // the code has passed all the checks and has been compiled successfully * }); */ fe(inPath: string, outPath: string, lintPaths: Array&lt;string&gt; = [], callback: () =&gt; void = emptyFn) { this.validate(inPath, lintPaths, () =&gt; { this.compiler.fe(inPath, outPath, callback); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSCompiler.js.html":{"id":"JSCompiler.js.html","title":"Source: JSCompiler.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: JSCompiler.js /* @flow */ /* @flowignore */ import config from '../config/babel'; import {Compiler} from './Compiler'; import type {ProgramData} from './Compiler'; import {join, extname, dirname, basename} from 'path'; import {readdir, stat, createReadStream, createWriteStream} from 'fs'; import {transformFile} from 'babel-core'; import webpack from 'webpack'; import MemoryFS from 'memory-fs'; import UglifyJS from 'uglify-js'; import autoprefixer from 'autoprefixer'; import importer from 'node-sass-import-once'; /* eslint-disable no-sync */ /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype, precision = 8, cache = {}, fakeFS = new MemoryFS(); /** * A JavaScript compiler * * @class JSCompiler * @extends Compiler * @param {Object} [options={}] - allows to override the default Babel options * @example * import {JSCompiler} from 'webcompiler'; * * const compiler = new JSCompiler(); */ export class JSCompiler extends Compiler { /** * Babel options * * @member {Object} options * @memberOf JSCompiler * @private * @instance */ options: Object; /** * The number of files being compiled at the moment * * @member {number} processing * @memberOf JSCompiler * @private * @instance */ processing: number; constructor(options: Object = {}) { super(); this.options = Object.assign({}, config.env[this.isProduction ? 'production' : 'development'], options); this.processing = 0; } /** * Compiles a directory of files for the back end * * @memberOf JSCompiler * @instance * @private * @method beDir * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.beDir('/path/to/an/input/directory', '/path/to/the/output/directory', callback); */ beDir(inPath: string, outPath: string, callback: () =&gt; void) { readdir(inPath, (readdirErr, files) =&gt; { if (readdirErr) { return console.error(readdirErr); } files.forEach(file =&gt; { this.beTraverse(join(inPath, file), join(outPath, file), callback); }); }); } /** * Compiles a JavaScript file for the back end * * @memberOf JSCompiler * @instance * @private * @method beFile * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.beFile('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ beFile(inPath: string, outPath: string, callback: () =&gt; void) { ++this.processing; transformFile(inPath, this.options, (transformFileErr, result) =&gt; { if (transformFileErr) { return console.error(transformFileErr); } this.fsWrite(outPath, result, callback); }); } /** * Compiles a files * * @memberOf JSCompiler * @instance * @private * @method copyFile * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.copyFile('/path/to/an/input/file', '/path/to/the/output/file', callback); */ copyFile(inPath: string, outPath: string, callback: () =&gt; void) { ++this.processing; this.mkdir(outPath, () =&gt; { createReadStream(inPath).pipe(createWriteStream(outPath)); callback(); }); } /** * Compiles a JavaScript file for the back end or recursively traverses a directory, looking for the JavaScript files * to compile. Non-JavaScript files are simply copied over. * * @memberOf JSCompiler * @instance * @private * @method beTraverse * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} callback - a callback function * @example * compiler.beTraverse('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ beTraverse(inPath: string, outPath: string, callback: () =&gt; void) { stat(inPath, (statErr, stats) =&gt; { if (statErr) { return console.error(statErr); } if (stats.isDirectory()) { this.beDir(inPath, outPath, callback); } else if ('.js' === extname(inPath)) { this.beFile(inPath, outPath, callback); } else { this.copyFile(inPath, outPath, callback); } }); } /** * Minifies the compiled code * * @memberOf JSCompiler * @instance * @method minify * @param {string} path - a path to the file (can be used for the sourceMappingURL comment) * @param {ProgramData} data - the actual program data to compress * @return {ProgramData} processed application code with source maps * @example * const minifiedData = compiler.minify('/path/to/the/output/file.js', data); */ minify(path: string, data: ProgramData): ProgramData { return UglifyJS.minify(data.code, { fromString: true, mangle: false, output: {space_colon: false}, inSourceMap: JSON.parse(data.map), outSourceMap: `${basename(path)}.map` }); } /** * Compiles a JavaScript file or a directory for the back end. Non-JavaScript files are simply copied over. * * @memberOf JSCompiler * @instance * @method be * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ be(inPath: string, outPath: string, callback: () =&gt; void = emptyFn) { if (this.processing) { return console.error('Still working...'); } this.beTraverse(inPath, outPath, () =&gt; { if (!(--this.processing)) { this.done(inPath, callback); } }); } /** * Compiles, bundles (in production mode also minifies and g-zips) a JavaScript file for the front end. * * Supports importing (requiring) `.scss` files inside of JavaScript. * * @memberOf JSCompiler * @instance * @method fe * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Function} [callback=function () {}] - a callback function * @return {void} * @see {@link https://github.com/css-modules/css-modules|CSS Modules} * @example * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); */ fe(inPath: string, outPath: string, callback: () =&gt; void = emptyFn) { const compiler = webpack({ cache, debug: true, devtool: 'source-map', entry: inPath, output: {path: dirname(outPath), filename: basename(outPath)}, module: { loaders: [{ test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {cacheDirectory: true, ...this.options} }, { test: /\\.scss$/, loaders: ['style?singleton', 'css?modules&amp;minimize&amp;importLoaders=1&amp;sourceMap', 'postcss', 'sass?sourceMap'] }] }, postcss: () =&gt; [autoprefixer], sassLoader: { importer, importOnce: {index: true, css: false, bower: false}, includePaths: ['node_modules/bootstrap-sass/assets/stylesheets', 'node_modules'], precision } }); if (this.isProduction) { compiler.outputFileSystem = fakeFS; } compiler.run((error, stats) =&gt; { if (error) { return console.error(error); } const jsonStats = stats.toJson(), errors = jsonStats.errors.concat(jsonStats.warnings); if (errors.length) { return errors.forEach(err =&gt; { console.error(err); }); } if (!this.isProduction) { return this.done(inPath, callback); } this.optimize(inPath, outPath, { code: fakeFS.readFileSync(outPath, 'utf8'), map: fakeFS.readFileSync(`${outPath}.map`, 'utf8') }, callback); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSLint.js.html":{"id":"JSLint.js.html","title":"Source: JSLint.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: JSLint.js /* @flow */ import {CLIEngine} from 'eslint'; import {join} from 'path'; /** * The JavaScript linting error object * * @typedef {Object} JSLintError * @property {string} message - the error message * @property {string} [ruleId] - the relative linting rule * @property {string} filePath - the path to a file * @property {number} line - the offending line number * @property {number} column - the offending column number */ type JSLintError = {message: string, ruleId?: string, filePath: string, line: number, column: number}; /** * Invoked on operation success or failure * * @callback JSLintCallback * @param {Array&lt;JSLintError&gt;} [errors] - a collection of error objects */ export type JSLintCallback = (errors: ?Array&lt;JSLintError&gt;) =&gt; void; const configFile = join(__dirname, '..', 'config', 'eslint.yml'); /** * A JavaScript linter * * @class JSLint * @param {Object} [rules={}] - an object that lets you override default linting rules * @example * import {JSLint} from 'webcompiler'; * import {join} from 'path'; * * const linter = new JSLint(); */ export class JSLint { /** * an internal linter instance * * @member {CLIEngine} linter * @memberof JSLint * @private * @instance */ linter: CLIEngine; constructor(rules: Object = {}) { this.linter = new CLIEngine({configFile, rules}); } /** * Execute the linter * * @memberof JSLint * @instance * @method run * @param {Array&lt;string&gt;} paths - an array of paths to files/directories to lint * @param {JSLintCallback} callback - a callback function, accepts 1 argument: an array of error objects or null * @example * // lint &quot;index.js&quot; as well as the entire contents of the &quot;src&quot; directory * linter.run([join(__dirname, 'index.js'), join(__dirname, 'src')], function (err) { * if (err) { * return e.forEach(e =&gt; { * console.log('\\x1b[41mESLint error\\x1b[0m &quot;\\x1b[33m%s%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', * e.message, e.ruleId ? ` (${e.ruleId})` : '', e.filePath, e.line, e.column); * }); * } * // there were no linting errors * }); */ run(paths: Array&lt;string&gt;, callback: JSLintCallback) { const report = this.linter.executeOnFiles(paths), errors = []; report.results.forEach(f =&gt; { f.messages.forEach(e =&gt; { e.filePath = f.filePath; errors.push(e); }); }); callback(errors.length ? errors : null); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"NativeProcess.js.html":{"id":"NativeProcess.js.html","title":"Source: NativeProcess.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: NativeProcess.js /* @flow */ import {spawn} from 'child_process'; /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype; /** * Invoked on operation success or failure * * @callback NativeProcessCallback * @param {string} [stderr] - an error message * @param {string} stdout - the process output */ export type NativeProcessCallback = (stderr: ?string, stdout: string) =&gt; void; /** * Encapsulates a {@link https://nodejs.org/api/child_process.html#child_process_class_childprocess|ChildProcess} * instance of a `task` * * @class NativeProcess * @param {string} task - a process name * @example * import {NativeProcess} from 'webcompiler'; * * const mkdir = new NativeProcess('mkdir'); */ export class NativeProcess { /** * a process name * * @member {string} task * @memberof NativeProcess * @private * @instance */ task: string; /** * a ChildProcess instance * * @member {ChildProcess} proc * @memberof NativeProcess * @private * @instance */ proc: any; constructor(task: string) { this.task = task; } /** * Execute the command * * @memberof NativeProcess * @instance * @method run * @param {NativeProcessCallback} [callback=function () {}] - a callback function * @param {Array&lt;string&gt;} [args=[]] - an array of arguments to pass to the process * @param {Object} [opts={}] - a configuration object for the process * @return {void} * @example * mkdir.run(error =&gt; { * if (error) { * return console.error(error); * } * // created a directory named &quot;example&quot; in cwd * }, ['example']); */ run(callback: NativeProcessCallback = emptyFn, args: Array&lt;string&gt; = [], opts: Object = {}) { if (this.proc) { return callback('Still working...', ''); } this.proc = spawn(this.task, args, opts); let stdout = '', stderr = ''; if (this.proc.stdout) { this.proc.stdout.on('data', data =&gt; { stdout += data; }); } if (this.proc.stderr) { this.proc.stderr.on('data', data =&gt; { stderr += data; }); } this.proc.on('error', error =&gt; { stderr += error.toString(); }); this.proc.on('close', code =&gt; { this.proc = null; callback(code ? stderr : null, stdout); }); } /** * Kills the process if any is running * * @memberof NativeProcess * @instance * @method kill * @example * someEpensiveProcess.kill(); */ kill() { if (this.proc) { this.proc.kill(); this.proc = null; } } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASS.js.html":{"id":"SASS.js.html","title":"Source: SASS.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: SASS.js /* @flow */ import {SASSCompiler} from './SASSCompiler'; import {SASSLint} from './SASSLint'; /* @flowignore */ const emptyFn: () =&gt; void = Function.prototype; /** * SASS compilation tools * * @class SASS * @param {Array&lt;string&gt;} [includePaths=[]] - an array of additional include paths * @param {Array&lt;string&gt;} [excludeLinter=[]] - names of linters to exclude * @param {Object} [importOnceOptions={}] - an object that lets you override default importOnce resolver * configuration * @example * import {SASS} from 'webcompiler'; * * const sass = new SASS(); */ export class SASS { /** * SCSS compiler * * @member {SASSCompiler} compiler * @memberof SASS * @private * @instance */ compiler: SASSCompiler; /** * SCSS linter * * @member {SASSLint} linter * @memberof SASS * @private * @instance */ linter: SASSLint; constructor(includePaths: Array&lt;string&gt; = [], excludeLinter: Array&lt;string&gt; = [], importOnceOptions: Object = {}) { this.compiler = new SASSCompiler(includePaths, importOnceOptions); this.linter = new SASSLint(...excludeLinter); } /** * Performs linting * * @memberof SASS * @instance * @method lint * @param {Array&lt;string&gt;} paths - an array of paths to lint * @param {Function} callback - a callback function * @example * sass.lint(['/path/to/the/input/file.scss', '/lint/this/directory/too'], () =&gt; { * // successfully linted * }); */ lint(paths: Array&lt;string&gt;, callback: () =&gt; void) { this.linter.run(paths, linterErr =&gt; { if (linterErr) { return console.error(linterErr); } callback(); }); } /** * Wraps {@link SASSCompiler#fe} to add linting * * @memberof SASS * @instance * @method fe * @param {string} inPath - the input path * @param {string} outPath - the output path * @param {Array&lt;string&gt;} [lintPaths=[]] - an array of paths to files/directories to lint * @param {Function} [callback=function () {}] - a callback function * @return {void} * @example * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { * // the code has passed all the checks and has been compiled successfully * }); */ fe(inPath: string, outPath: string, lintPaths: Array&lt;string&gt; = [], callback: () =&gt; void = emptyFn) { this.lint(lintPaths.concat([inPath]), () =&gt; { this.compiler.fe(inPath, outPath, callback); }); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASSLint.js.html":{"id":"SASSLint.js.html","title":"Source: SASSLint.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: SASSLint.js /* @flow */ import {NativeProcess} from './NativeProcess'; import type {NativeProcessCallback} from './NativeProcess'; import {join} from 'path'; const config = join(__dirname, '..', 'config', 'scsslint.yml'); /** * A SASS linter * * @class SASSLint * @param {...string} excludeLinter - names of linters to exclude * @example * import {SASSLint} from 'webcompiler'; * import {join} from 'path'; * * const linter = new SASSLint(); */ export class SASSLint { /** * a comma-separated list of linter names to exclude from execution * * @member {string} excludeLinter * @memberof SASSLint * @private * @instance */ excludeLinter: string; /** * a NativeProcess instance for scss-lint * * @member {NativeProcess} proc * @memberof SASSLint * @private * @instance */ proc: NativeProcess; constructor(...excludeLinter: Array&lt;string&gt;) { this.excludeLinter = excludeLinter.join(','); this.proc = new NativeProcess('scss-lint'); } /** * Execute the linter * * @memberof SASSLint * @instance * @method run * @param {Array&lt;string&gt;} paths - an array of paths to files/directories to lint * @param {Function} callback - a callback function, accepts 1 argument: an error message or null * @example * // lint &quot;style.scss&quot; as well as the entire contents of the &quot;sass&quot; directory * linter.run([join(__dirname, 'style.scss'), join(__dirname, 'sass')], error =&gt; { * if (error) { * return console.error(error); * } * // there were no linting errors * }); */ run(paths: Array&lt;string&gt;, callback: NativeProcessCallback) { const args = paths.concat(['-c', config]); if (this.excludeLinter) { args.push('-x', this.excludeLinter); } this.proc.run(callback, args); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"watch.js.html":{"id":"watch.js.html","title":"Source: watch.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: watch.js /* @flow */ import {Client} from 'fb-watchman'; const client = new Client(), ALPHANUMERIC_BASE = 36; /** * Using the Facebook Watchman, watches the directory `dir` for changes of files with extension `type` and runs * `callback` when a change is detected. * * This watcher's only goal is performance, hence the simplicity. * * @function watch * @param {string} dir - a full system path to a directory to watch * @param {string} type - a file extension * @param {Function} callback - a callback function * @see {@link https://facebook.github.io/watchman/|Watchman} * @example * import {watch} from 'webcompiler'; * import {join} from 'path'; * * watch(join(__dirname, 'src'), 'js', someFunction); */ export function watch(dir: string, type: string, callback: () =&gt; void) { const subscription = Date.now().toString(ALPHANUMERIC_BASE); client.capabilityCheck({}, capabilityErr =&gt; { if (capabilityErr) { console.error(capabilityErr); return; } client.command(['watch-project', dir], (watchErr, watchResp) =&gt; { const watcher = watchResp.watch; if (watchErr) { console.error('Error initiating watch:', watchErr); return; } if (watchResp.warning) { console.log('warning: ', watchResp.warning); } client.command(['clock', watcher], (clockErr, clockResp) =&gt; { if (clockErr) { console.error('Failed to query clock:', clockErr); return; } client.command(['subscribe', watcher, subscription, { expression: ['suffix', type], since: clockResp.clock }], subscribeErr =&gt; { if (subscribeErr) { console.error('failed to subscribe: ', subscribeErr); } }); client.on('subscription', subscriptionResp =&gt; { if (subscription === subscriptionResp.subscription) { callback(); } }); }); }); }); } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"yaml.js.html":{"id":"yaml.js.html","title":"Source: yaml.js","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Source: yaml.js /* @flow */ import {safeLoad} from 'js-yaml'; import {readFileSync} from 'fs'; /** * Invoked on operation success or failure * * @callback YAMLCallback * @param {string} [error] - an error message * @param {Object} data - the parsed object */ export type YAMLCallback = (error: ?string, data: Object) =&gt; void; /** * Read the contents of a YAML file * * @function yaml * @param {string} filename - the full system path to a YAML file * @param {YAMLCallback} callback - a callback function * @example * import {yaml} from 'webcompiler'; * import {join} from 'path'; * * yaml(join(__dirname, 'config', 'config.yml'), (error, data) =&gt; { * if (error) { * return console.error(error); * } * // the parsed config object * }); */ export function yaml(filename: string, callback: YAMLCallback) { try { const yamlString: string = readFileSync(filename, 'utf8'); callback(null, safeLoad(yamlString, {filename})); } catch (e) { callback(e.toString(), {}); } } × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"global.html":{"id":"global.html","title":"Global","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Global Methods watch(dir, type, callback) Using the Facebook Watchman, watches the directory dir for changes of files with extension type and runs callback when a change is detected. This watcher's only goal is performance, hence the simplicity. Parameters: Name Type Description dir string a full system path to a directory to watch type string a file extension callback function a callback function Source: watch.js, line 8 See: Watchman Example import {watch} from 'webcompiler'; import {join} from 'path'; watch(join(__dirname, 'src'), 'js', someFunction); yaml(filename, callback) Read the contents of a YAML file Parameters: Name Type Description filename string the full system path to a YAML file callback YAMLCallback a callback function Source: yaml.js, line 15 Example import {yaml} from 'webcompiler'; import {join} from 'path'; yaml(join(__dirname, 'config', 'config.yml'), (error, data) =&gt; { if (error) { return console.error(error); } // the parsed config object }); Type Definitions AutoprefixCallback(data) Invoked on operation success or failure Parameters: Name Type Description data ProgramData the parsed object Source: SASSCompiler.js, line 28 CheckBinCallback(file) Invoked on operation success or failure Parameters: Name Type Argument Description file string &lt;optional&gt; a full system path to a file Source: Documentation.js, line 35 DocumentationConfig Processed application code with source maps Type: Object Properties: Name Type Argument Default Description inputDir string &lt;optional&gt; &quot;src&quot; the input application code directory outputDir string &lt;optional&gt; &quot;docs&quot; the output directory for the generated documentation readMe string &lt;optional&gt; &quot;README.md&quot; the documentation &quot;homepage&quot; (README.md file) template string &lt;optional&gt; &quot;node_modules/ink-docstrap/template&quot; a full system path to a valid JSDoc3 template directory jsdocConfig string &lt;optional&gt; &quot;&lt;webcompiler root&gt;/config/jsdoc.json&quot; a full system path to a JSDoc3 configuration file Source: Documentation.js, line 14 FindExecutableCallback(file) Invoked on operation success or failure Parameters: Name Type Description file string a full system path to a file Source: Documentation.js, line 27 JSLintCallback(errors) Invoked on operation success or failure Parameters: Name Type Argument Description errors Array.&lt;JSLintError&gt; &lt;optional&gt; a collection of error objects Source: JSLint.js, line 18 JSLintError The JavaScript linting error object Type: Object Properties: Name Type Argument Description message string the error message ruleId string &lt;optional&gt; the relative linting rule filePath string the path to a file line number the offending line number column number the offending column number Source: JSLint.js, line 6 NativeProcessCallback(stderr, stdout) Invoked on operation success or failure Parameters: Name Type Argument Description stderr string &lt;optional&gt; an error message stdout string the process output Source: NativeProcess.js, line 8 ProgramData Processed application code with source maps Type: Object Properties: Name Type Description code string program code map string source map json string Source: Compiler.js, line 10 YAMLCallback(error, data) Invoked on operation success or failure Parameters: Name Type Argument Description error string &lt;optional&gt; an error message data Object the parsed object Source: yaml.js, line 6 × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Classes Classes Compiler DevServer Documentation JS JSCompiler JSLint NativeProcess SASS SASSCompiler SASSLint × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"index.html":{"id":"index.html","title":"Index","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml webcompilerLint, type-check, compile, package and gzip JavaScript (ES6 + Flow static types + JSX), for the browser as well as NodeJS; lint, compile, auto-prefix, minify and gzip SASS. Project Home | API Docs | Discord Webpack is an amazing tool, however it requires a lot of boilerplate to properly setup and configure, especially when you use it on more than one project. ESLint is constantly updated, new rules are added, APIs are changed. Properly configuring it is a routine and time consuming task, which is completely impractical to perform on each project separately. APIs are sometimes changed without any change in functionality (e.g. Babel 5 vs Babel 6). This project aims to abstract all of those problems out of the development of applications. Prerequisites Facebook Flow SCSS-Lint Watchman A note about Facebook FlowFacebook Flow is a static analysis tool used to check your JavaScript code for possible errors at compile time. It is very smart at understanding your program code, however you should not rely on it being smart enough to just understand your external dependencies too. It can do that, the problem is that a typical NodeJS project can contain hundreds NPM modules, with thousands of JavaScript files. It is a very complicated task, even for a tool that smart, to parse all of them and stay performant enough to not only be usable but useful as well. Which is why it must not be allowed to even try to understand any files that reside in a node_modules directory. Interface Files must be used instead. You can find examples of such interface files, as well as the interface file for the tool itself, in the interfaces directory. Installationnpm i webcompiler --save-devProduction buildsBy default all compilation is done in development mode. If you wish to compile for production just set the NODE_ENV environment variable to &quot;production&quot;, the following additional actions will be performed by the compiler: advanced compilation time optimizations minification (only fe in production mode) g-zip compression (only fe in production mode) Important!The resulting JavaScript and CSS files from fe in production mode are gzip compressed for performance (see Gzip Components), so make sure to provide a &quot;Content-Encoding&quot; header to the browser (e.g. res.setHeader('Content-Encoding', 'gzip');). × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Compiler.html":{"id":"Compiler.html","title":"Class: Compiler","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: Compiler Compiler &lt;abstract&gt; new Compiler() The base compiler class Source: Compiler.js, line 19 Members &lt;readonly&gt; isProduction :boolean True if the NODE_ENV environment variable is equal to production. Caution: modifying it's value directly may lead to unexpected results Type: boolean Source: Compiler.js, line 26 Methods &lt;protected&gt; done(inPath, callback) Executed when the compilation is complete Parameters: Name Type Description inPath string the input path callback function a callback function Source: Compiler.js, line 55 Example compiler.done('/path/to/an/input/file', callback); &lt;protected&gt; fsWrite(path, data, callback) Writes the data to disk Parameters: Name Type Description path string the output path data ProgramData the data to write callback function a callback function Source: Compiler.js, line 72 Example compiler.fsWrite('/path/to/an/output/file', data, callback); &lt;abstract&gt; minify(path, data) Minifies the compiled code Parameters: Name Type Description path string a path to the file (can be used for the sourceMappingURL comment) data ProgramData the actual program data to compress Source: Compiler.js, line 42 Returns: processed application code with source maps or null on error Type ProgramData &lt;protected&gt; mkdir(path, callback) Recursively creates a directory containing a file specified by path. Parameters: Name Type Description path string a path to a file callback function a callback function Source: Compiler.js, line 104 Example compiler.mkdir('/path/to/a/file', callback); &lt;protected&gt; optimize(inPath, outPath, data, callback) Minifies and g-zips the program Parameters: Name Type Description inPath string the input path outPath string the output path data ProgramData processed application code with source maps callback function a callback function Source: Compiler.js, line 125 Example compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"DevServer.html":{"id":"DevServer.html","title":"Class: DevServer","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: DevServer DevServer new DevServer(script, style, devDir, port, react) A lightweight development server that rapidly recompiles the JavaScript and SASS files when they are edited and updates the page. Utilizes the Webpack development server. Includes react hot loader to further optimize the development process of the React applications. Please install and enable the LiveReload browser extension for the CSS reloading to work. Parameters: Name Type Argument Default Description script string a full system path to a JavaScript file style string a full system path to a SASS file devDir string a full system path to a directory in which to put any compiled development resources port number &lt;optional&gt; 3000 a port at which to start the dev server react boolean &lt;optional&gt; true false to disable the react hot loader plugin Source: DevServer.js, line 13 See: React Hot Loader Example import {DevServer} from 'webcompiler'; import {join} from 'path'; const rootDir = join(__dirname, '..'), devDir = join(rootDir, 'development'), server = new DevServer(join(devDir, 'script.js'), join(devDir, 'app.scss'), devDir); server.run(rootDir); // now navigate to http://localhost:3000 using your favorite browser ( preferably Chrome :) ) Methods run(watchDir) Starts the Webpack development server, compiles SASS and starts watching for file changes Parameters: Name Type Description watchDir string the directory in which to watch for the changes in the SASS files Source: DevServer.js, line 181 Example server.run('/path/to/some/directory'); watchJS() Starts the Webpack development server Source: DevServer.js, line 161 Example server.watchJS(); watchSASS(watchDir) Compile SASS and start watching for file changes Parameters: Name Type Description watchDir string the directory in which to watch for the changes in the SASS files Source: DevServer.js, line 145 Example server.watchSASS('/path/to/some/directory'); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"Documentation.html":{"id":"Documentation.html","title":"Class: Documentation","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: Documentation Documentation new Documentation(config) Generates API documentation The default JSDoc plugin specified in jsdocConfig strips out all of the code from a file while retaining newlines (unlike the built in commentsOnly plugin that ships with JSDoc3). That way: line numbers are preserved in the source view you don't need to use a pre-compiler, you will always see the same code as you wrote in the docs source view since JSDoc only sees comments you can use any code syntax you like - ES2015, ES7, JSX, it doesn't even have to be JavaScript. The markdown plugin is also included by default. Parameters: Name Type Argument Default Description config DocumentationConfig &lt;optional&gt; {} a configuration object Source: Documentation.js, line 43 Example import {Documentation} from 'webcompiler'; const docs = new Documentation(); Methods run(callback) Generate the documentation Parameters: Name Type Argument Default Description callback function &lt;optional&gt; function () {} a callback function Source: Documentation.js, line 134 Returns: Type void Example docs.run(() =&gt; { // generated the API documentation }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JS.html":{"id":"JS.html","title":"Class: JS","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: JS JS new JS(babelOptions, lintRules) JavaScript compilation tools Parameters: Name Type Argument Default Description babelOptions Object &lt;optional&gt; {} allows to override the default Babel options lintRules Object &lt;optional&gt; {} allows to override the default linting rules Source: JS.js, line 10 Example import {JS} from 'webcompiler'; const js = new JS(); Methods be(inPath, outPath, lintPaths, callback) Wraps JSCompiler#be to add static analysis and linting Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path lintPaths Array.&lt;string&gt; &lt;optional&gt; [] an array of paths to files/directories to lint callback function &lt;optional&gt; function () {} a callback function Source: JS.js, line 130 Returns: Type void Example compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { // the code has passed all the checks and has been compiled successfully }); fe(inPath, outPath, lintPaths, callback) Wraps JSCompiler#fe to add static analysis and linting Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path lintPaths Array.&lt;string&gt; &lt;optional&gt; [] an array of paths to files/directories to lint callback function &lt;optional&gt; function () {} a callback function Source: JS.js, line 152 Returns: Type void Example compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { // the code has passed all the checks and has been compiled successfully }); lint(paths, callback) Performs linting Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to files/directories to lint callback function a callback function, invoked only when successfully linted Source: JS.js, line 82 Example js.lint(['/path/to/the/input/file.js', '/lint/this/directory/too'], () =&gt; { // successfully linted }); typecheck(callback) Performs static analysis Parameters: Name Type Description callback function a callback function, invoked only when successfully typechecked Source: JS.js, line 58 Example js.typecheck(() =&gt; { // successfully typechecked }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSCompiler.html":{"id":"JSCompiler.html","title":"Class: JSCompiler","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: JSCompiler JSCompiler new JSCompiler(options) A JavaScript compiler Parameters: Name Type Argument Default Description options Object &lt;optional&gt; {} allows to override the default Babel options Source: JSCompiler.js, line 24 Example import {JSCompiler} from 'webcompiler'; const compiler = new JSCompiler(); Extends Compiler Members &lt;readonly&gt; isProduction :boolean True if the NODE_ENV environment variable is equal to production. Caution: modifying it's value directly may lead to unexpected results Type: boolean Inherited From: Compiler#isProduction Source: Compiler.js, line 26 Methods be(inPath, outPath, callback) Compiles a JavaScript file or a directory for the back end. Non-JavaScript files are simply copied over. Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path callback function &lt;optional&gt; function () {} a callback function Source: JSCompiler.js, line 181 Returns: Type void Example compiler.be('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); &lt;protected&gt; done(inPath, callback) Executed when the compilation is complete Parameters: Name Type Description inPath string the input path callback function a callback function Inherited From: Compiler#done Source: Compiler.js, line 55 Example compiler.done('/path/to/an/input/file', callback); fe(inPath, outPath, callback) Compiles, bundles (in production mode also minifies and g-zips) a JavaScript file for the front end. Supports importing (requiring) .scss files inside of JavaScript. Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path callback function &lt;optional&gt; function () {} a callback function Source: JSCompiler.js, line 205 See: CSS Modules Returns: Type void Example compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback); &lt;protected&gt; fsWrite(path, data, callback) Writes the data to disk Parameters: Name Type Description path string the output path data ProgramData the data to write callback function a callback function Inherited From: Compiler#fsWrite Source: Compiler.js, line 72 Example compiler.fsWrite('/path/to/an/output/file', data, callback); minify(path, data) Minifies the compiled code Parameters: Name Type Description path string a path to the file (can be used for the sourceMappingURL comment) data ProgramData the actual program data to compress Overrides: Compiler#minify Source: JSCompiler.js, line 159 Returns: processed application code with source maps Type ProgramData Example const minifiedData = compiler.minify('/path/to/the/output/file.js', data); &lt;protected&gt; mkdir(path, callback) Recursively creates a directory containing a file specified by path. Parameters: Name Type Description path string a path to a file callback function a callback function Inherited From: Compiler#mkdir Source: Compiler.js, line 104 Example compiler.mkdir('/path/to/a/file', callback); &lt;protected&gt; optimize(inPath, outPath, data, callback) Minifies and g-zips the program Parameters: Name Type Description inPath string the input path outPath string the output path data ProgramData processed application code with source maps callback function a callback function Inherited From: Compiler#optimize Source: Compiler.js, line 125 Example compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"JSLint.html":{"id":"JSLint.html","title":"Class: JSLint","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: JSLint JSLint new JSLint(rules) A JavaScript linter Parameters: Name Type Argument Default Description rules Object &lt;optional&gt; {} an object that lets you override default linting rules Source: JSLint.js, line 28 Example import {JSLint} from 'webcompiler'; import {join} from 'path'; const linter = new JSLint(); Methods run(paths, callback) Execute the linter Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to files/directories to lint callback JSLintCallback a callback function, accepts 1 argument: an array of error objects or null Source: JSLint.js, line 54 Example // lint &quot;index.js&quot; as well as the entire contents of the &quot;src&quot; directory linter.run([join(__dirname, 'index.js'), join(__dirname, 'src')], function (err) { if (err) { return e.forEach(e =&gt; { console.log('\\x1b[41mESLint error\\x1b[0m &quot;\\x1b[33m%s%s\\x1b[0m&quot; in \\x1b[36m%s\\x1b[0m on \\x1b[35m%s:%s\\x1b[0m', e.message, e.ruleId ? ` (${e.ruleId})` : '', e.filePath, e.line, e.column); }); } // there were no linting errors }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"NativeProcess.html":{"id":"NativeProcess.html","title":"Class: NativeProcess","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: NativeProcess NativeProcess new NativeProcess(task) Encapsulates a ChildProcess instance of a task Parameters: Name Type Description task string a process name Source: NativeProcess.js, line 17 Example import {NativeProcess} from 'webcompiler'; const mkdir = new NativeProcess('mkdir'); Methods kill() Kills the process if any is running Source: NativeProcess.js, line 98 Example someEpensiveProcess.kill(); run(callback, args, opts) Execute the command Parameters: Name Type Argument Default Description callback NativeProcessCallback &lt;optional&gt; function () {} a callback function args Array.&lt;string&gt; &lt;optional&gt; [] an array of arguments to pass to the process opts Object &lt;optional&gt; {} a configuration object for the process Source: NativeProcess.js, line 53 Returns: Type void Example mkdir.run(error =&gt; { if (error) { return console.error(error); } // created a directory named &quot;example&quot; in cwd }, ['example']); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASS.html":{"id":"SASS.html","title":"Class: SASS","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: SASS SASS new SASS(includePaths, excludeLinter, importOnceOptions) SASS compilation tools Parameters: Name Type Argument Default Description includePaths Array.&lt;string&gt; &lt;optional&gt; [] an array of additional include paths excludeLinter Array.&lt;string&gt; &lt;optional&gt; [] names of linters to exclude importOnceOptions Object &lt;optional&gt; {} an object that lets you override default importOnce resolver configuration Source: SASS.js, line 9 Example import {SASS} from 'webcompiler'; const sass = new SASS(); Methods fe(inPath, outPath, lintPaths, callback) Wraps SASSCompiler#fe to add linting Parameters: Name Type Argument Default Description inPath string the input path outPath string the output path lintPaths Array.&lt;string&gt; &lt;optional&gt; [] an array of paths to files/directories to lint callback function &lt;optional&gt; function () {} a callback function Source: SASS.js, line 70 Returns: Type void Example compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', ['/lint/this/directory/too'], () =&gt; { // the code has passed all the checks and has been compiled successfully }); lint(paths, callback) Performs linting Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to lint callback function a callback function Source: SASS.js, line 48 Example sass.lint(['/path/to/the/input/file.scss', '/lint/this/directory/too'], () =&gt; { // successfully linted }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASSCompiler.html":{"id":"SASSCompiler.html","title":"Class: SASSCompiler","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: SASSCompiler SASSCompiler new SASSCompiler(includePaths, importOnceOptions) A SASS compiler Parameters: Name Type Argument Default Description includePaths Array.&lt;string&gt; &lt;optional&gt; [] an array of additional include paths importOnceOptions Object &lt;optional&gt; {} an object that lets you override default importOnce resolver configuration Source: SASSCompiler.js, line 36 Example import {SASSCompiler} from 'webcompiler'; const compiler = new SASSCompiler(); Extends Compiler Members &lt;readonly&gt; isProduction :boolean True if the NODE_ENV environment variable is equal to production. Caution: modifying it's value directly may lead to unexpected results Type: boolean Inherited From: Compiler#isProduction Source: Compiler.js, line 26 Methods autoprefix(path, data, callback) Auto-prefixes the compiled code Parameters: Name Type Description path string a path to the file data ProgramData the actual program data to auto-prefix callback AutoprefixCallback a callback function Source: SASSCompiler.js, line 107 Example compiler.autoprefix('/path/to/the/output/file.css', data, result =&gt; { // successfully added the vendor prefixes }); &lt;protected&gt; done(inPath, callback) Executed when the compilation is complete Parameters: Name Type Description inPath string the input path callback function a callback function Inherited From: Compiler#done Source: Compiler.js, line 55 Example compiler.done('/path/to/an/input/file', callback); fe(inPath, outPath, callback) Compiles, auto-prefixes and optionally minifies and g-zips in the production mode Parameters: Name Type Argument Default Description inPath string a full system path to the input file outPath string a full system path to the output file callback function &lt;optional&gt; function () {} a callback function Source: SASSCompiler.js, line 138 Example compiler.fe('/path/to/the/input/file.scss', '/path/to/the/output/file.css', () =&gt; { // compiled successfully }); &lt;protected&gt; fsWrite(path, data, callback) Writes the data to disk Parameters: Name Type Description path string the output path data ProgramData the data to write callback function a callback function Inherited From: Compiler#fsWrite Source: Compiler.js, line 72 Example compiler.fsWrite('/path/to/an/output/file', data, callback); minify(path, data) Minifies the compiled code Parameters: Name Type Description path string a path to the file (can be used for the sourceMappingURL comment) data ProgramData the actual program data to compress Overrides: Compiler#minify Source: SASSCompiler.js, line 76 Returns: processed application code with source maps or null on error Type ProgramData Example const minifiedData = compiler.minify('/path/to/the/output/file.css', data); &lt;protected&gt; mkdir(path, callback) Recursively creates a directory containing a file specified by path. Parameters: Name Type Description path string a path to a file callback function a callback function Inherited From: Compiler#mkdir Source: Compiler.js, line 104 Example compiler.mkdir('/path/to/a/file', callback); &lt;protected&gt; optimize(inPath, outPath, data, callback) Minifies and g-zips the program Parameters: Name Type Description inPath string the input path outPath string the output path data ProgramData processed application code with source maps callback function a callback function Inherited From: Compiler#optimize Source: Compiler.js, line 125 Example compiler.optimize('/path/to/an/input/file', '/path/to/the/output/file', data, callback); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "},"SASSLint.html":{"id":"SASSLint.html","title":"Class: SASSLint","body":" Documentation Classes CompilerDevServerDocumentationJSJSCompilerJSLintNativeProcessSASSSASSCompilerSASSLint Global watchyaml Class: SASSLint SASSLint new SASSLint(excludeLinter) A SASS linter Parameters: Name Type Argument Description excludeLinter string &lt;repeatable&gt; names of linters to exclude Source: SASSLint.js, line 9 Example import {SASSLint} from 'webcompiler'; import {join} from 'path'; const linter = new SASSLint(); Methods run(paths, callback) Execute the linter Parameters: Name Type Description paths Array.&lt;string&gt; an array of paths to files/directories to lint callback function a callback function, accepts 1 argument: an error message or null Source: SASSLint.js, line 46 Example // lint &quot;style.scss&quot; as well as the entire contents of the &quot;sass&quot; directory linter.run([join(__dirname, 'style.scss'), join(__dirname, 'sass')], error =&gt; { if (error) { return console.error(error); } // there were no linting errors }); × Search results Close Documentation generated by JSDoc 3.4.0 using the DocStrap template. "}}
     </script>
 
     <script type="text/javascript">
diff --git a/lib/JSCompiler.js b/lib/JSCompiler.js
index 1a73e88..54fe9b6 100644
--- a/lib/JSCompiler.js
+++ b/lib/JSCompiler.js
@@ -330,7 +330,7 @@ var JSCompiler = exports.JSCompiler = function (_Compiler) {
             query: (0, _extends3.default)({ cacheDirectory: true }, this.options)
           }, {
             test: /\.scss$/,
-            loaders: ['style?singleton', 'css?modules&minimize&importLoaders=1&sourceMap', 'postcss', 'sass&sourceMap']
+            loaders: ['style?singleton', 'css?modules&minimize&importLoaders=1&sourceMap', 'postcss', 'sass?sourceMap']
           }]
         },
         postcss: function postcss() {
diff --git a/package.json b/package.json
index c499b1c..58a8113 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "eslint-plugin-react": "^3.14.0",
     "fb-watchman": "^1.7.0",
     "ink-docstrap": "^1.1.0",
-    "js-yaml": "^3.4.6",
+    "js-yaml": "^3.5.2",
     "jsdoc": "^3.4.0",
     "memory-fs": "^0.3.0",
     "mkdirp": "^0.5.1",
diff --git a/src/JSCompiler.js b/src/JSCompiler.js
index 91738e8..c382436 100644
--- a/src/JSCompiler.js
+++ b/src/JSCompiler.js
@@ -233,7 +233,7 @@ export class JSCompiler extends Compiler {
           query: {cacheDirectory: true, ...this.options}
         }, {
           test: /\.scss$/,
-          loaders: ['style?singleton', 'css?modules&minimize&importLoaders=1&sourceMap', 'postcss', 'sass&sourceMap']
+          loaders: ['style?singleton', 'css?modules&minimize&importLoaders=1&sourceMap', 'postcss', 'sass?sourceMap']
         }]
       },
       postcss: () => [autoprefixer],
diff --git a/test/JSCompiler.spec.js b/test/JSCompiler.spec.js
index b537520a..ba8c13e 100644
--- a/test/JSCompiler.spec.js
+++ b/test/JSCompiler.spec.js
@@ -86,7 +86,7 @@ describe('JSCompiler', () => {
               }, {
                 test: /\.scss$/,
                 loaders: ['style?singleton', 'css?modules&minimize&importLoaders=1&sourceMap', 'postcss',
-                  'sass&sourceMap']
+                  'sass?sourceMap']
               }]
             },
             postcss: match(value => value()[0] === autoprefixer),