ES6 Modules

Base project template for ES6 modules including:

• Server with live reload of static files
• Compile tasks to run ES6 JavaScript and SASS CSS in the browser
• Optimise tasks to create concatenated and minified ES5 versions for production environments
• Test tasks to automate unit tests and functional tests with screenshots and diff
• Document tasks to automatically create documentation from comments within the code

Installation

Ensure you have Node and NPM installed using the instructions at:

https://nodejs.org/download/

Also the global packages you will need installed:

npm install jspm -g
npm install gulp -g

Then run the following command to install the dependancies:

jspm install
npm install

Usage

After installation has completed you will have access to the following features.

Default

gulp

• del - Delete folder helper
• gulp - Task runner
• gulp-connect - Runs the local server
• gulp-rename - Renames a file
• require-dir - Requires a directory of js files

http://localhost:8080/src/

Compile

gulp compile

• gulp-autoprefixer - Adds browser prefixes to css automatically
• gulp-combine-media-queries - Combines css media queries to optimise code size
• gulp-jspm - ES6 in browser compilation
• gulp-sass - Compiles scss into css

Optimise

gulp optimise

• gulp-html-replace - Updates html development paths with production paths
• gulp-imagemin - Minifies images to create smaller files
• gulp-minify-css - Minifies the css into a smaller file
• gulp-htmlmin - Minifies html code into a smaller file
• gulp-jspm - Converts ES6 to ES5 javascript and minifies the file
• imagemin-pngquant - Plugin for imagemin to minify png images

http://localhost:8080/www/

Test

gulp test

• gulp-webdriver - Testing task runner helper for gulp
• jasmine - Testing framework
• selenium-standalone - Testing server
• webdrivercss - Testing CSS regression screenshot comparison tool
• webdriverio - Testing task runner

Document

gulp document

• gulp-esdoc - Auto-generates js documentation
• sassdoc - Auto-generates css documentation

http://localhost:8080/docs/

Directory Layout

gulp/                 --> Gulp tasks
wdio.conf.js          --> Test runner configuration
src/                  --> Development code
www/                  --> Production code (after 'gulp optimise' command)

Contact

For more information please contact kmturley