jjviscomi / es2015-project-template

This is a skeleton of a default es2015 (es6) project. It includes most reasonable defaults.

ES2015 & ES6 Package/Project Skeleton

Prerecs

1. node & npm configured and installed
2. npm install -g gulp
3. phantomjs (brew install phantomjs, not required but recommended)
4. ... ???

Setup

1. fork repo
2. cd into directory
3. update package.json (name, version, description, main, author)
4. npm install
5. resolve any issues.

Run Gulp Default task

1. gulp

Project Structure

/
|
|-- /libs  #Supporting External Libs, Not to be compiled with your project.
|
|-- /src   #Project source files, globbed /**/*.js.
|
|-- /docs  #Project YUIDocs generated documentation.
|
|-- /tests #Jasmine test files, globbed *.js.
|   |
|   |- /tests/helpers #Helpers required for your tests, globbed *.js.
|
|-- /dist  #Output of the compilation process.
|   |
|   |- /dist/development/ #Non-minified compiled results.
|   |
|   |- /dist/production/  #Minified compiled results to use in production.
|
|- /karma.conf.js
|
|- /gulpfile.babel.js
|
|- /package.json

Build Steps & Info

Linting

The first step in the build process is passing your source files 'src/**/*.js', 'tests/*.spec.js', 'tests/helpers/*.js' through ESLint. It only has a basic config located at /.eslintrc.

Style Guidline & Presets

The next step is the JavaScript Code & Style we are using the presets as defined by AirBnB while they are strict they have been adopted widley by the industry.

Testing With Karma & Jasmine

The next step applies the tests in 'tests/*.spec.js', it does this by using the Karma Server to spin up a PhantomJS environment and run your Jasmine tests. You should have well covered code, and all new code must have a test in order to be pulled in.

Transcompiling with Babel (ES2015 preset)

Gulp the prefered build system / task runner is already configured to transcompile down to js. It uses Babel please check it out if you are not familiar with it. This step also concats all the files specified in 'src/**/*.js' to /dist/development/{package.json.main}, so make sure you update main. A good info page for people coming from CoffeeScript is Here, I recommend it!

YUIDocs generation

The document generation is done automatically using the YUIDocs so make sure to check out their syntax. It is simple and generates a highquality documentation in /docs/index.html which you can pull up in any browser. YUIDocs Syntax Refrence.

Minification

Minification is done wtih Uglify to perform basic compression and removing of comments. The output is placed /dist/production/{package.json.main} except the extension is renamed to .min.js from .js.