webcompiler

Lint, 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.

Prerequisites

1. Facebook Flow
2. SCSS-Lint

Important! Create a .flowconfig file at the root of your project with the following contents:

[ignore]
.*/invalidPackageJson/*
.*/test/*
.*/build/*

[include]

[libs]

[options]
suppress_comment=.*@noflow.*

Installation

npm i webcompiler --save

API Documentation

To get better acquainted with the available tools feel free to skim through the auto-generated API Docs.

Exposes 2 main classes

JS - lints, type-checks, compiles, packages, minifies and gzips JavaScript for the browser (production ready + Source Maps) and NodeJS

interface JS {
  constructor(lintRules: Object = {});
  validate(inPath: string, lintPaths: Array<string>, callback: Function);
  fe(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
  beFile(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
  beDir(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
}

SASS - lints, compiles, packages, adds vendor prefixes, minifies and gzips SASS for the browser (production ready + Source Maps)

interface SASS {
  constructor(excludeLinter: Array<string> = [], importOnceOptions: Object = {}, includePaths: Array<string> = []);
  validate(inPath: string, lintPaths: Array<string>, callback: Function);
  fe(inPath: string, outPath: string, callback: Function, ...lintPaths: Array<string>);
}

Arguments

1. inPath - a full system path to the input file/directory
2. outPath - a full system path to the output file/directory
3. callback - a callback function, executed after the successful compilation
4. lintPaths - paths to files/directories to lint (the input file is included automatically)

Example usage

import {JS} from 'webcompiler';
import watch from 'simple-recursive-watch';
import path from 'path';

var compiler = new JS(),
    libDir = path.join(__dirname, 'lib'),
    webJS = compiler.fe.bind(compiler,
      path.join(libDir, 'app.js'),
      path.join(__dirname, 'public', 'script.js'),
      function () {
        // notify LiveReload of the file change
        lr.changed({body: {files: ['script.js']}});
      }, libDir);

// compile at startup
webJS();
// automatically invoke the same compiler if any of the JavaScript files change
watch('lib', 'js', webJS);

Important!

The resulting JavaScript and CSS files from fe are gzip compressed for performance (see Gzip Components), so make sure to provide a "Content-Encoding" header to the browser (e.g. res.setHeader('Content-Encoding', 'gzip');).

Additional info

1. ESLint, babel-eslint, eslint-plugin-babel and ESLint-plugin-React are used to lint the JavaScript
2. Facebook Flow is used to type-check the JavaScript
3. Babel is used to compile the JavaScript
4. webpack is used to package the JavaScript
5. UglifyJS 2 is used to compress the JavaScript
6. SCSS-Lint is used to lint SASS
7. node-sass and Import Once are used to compile SASS
8. PostCSS and Autoprefixer Core are used to automatically add the browser vendor prefixes to the generated CSS
9. Clean-css is used to compress the CSS