Build Tools

A starter kit using webpack 2 and gulp.

Note: The examples in this kit are using jQuery but are not concrete to the project.

TODO:

1. Create a command to remove the boilerplate code.
2. Create a command to quickly scaffold the app (with different presets).

Features

A list of features in this kit.

• Build Tools
  • Gulp (gulp)
    • Everything except javascript is handled with Gulp.
  • Webpack 2 (webpack)
    • Everything javascript related is handle with Webpack 2.
• Environment
  • BrowserSync (browser-sync)
    • Webpack Dev Middleware (webpack-dev-middleware)
    • Webpack Hot Middleware (webpack-hot-middleware)
  • Docker (TODO) (docker)
• Style Support
  • Sass/Scss (gulp-sass)
  • Minification (gulp-cssnano)
  • Media Query Packer (gulp-combine-mq)
  • Globbing (gulp-sass-glob)
  • Sprites (Sprite Scss File) (gulp.spritesmith)
  • Sourcemaps (gulp-sourcemaps)
• Script Support (Webpack 2)
  • ES2015+
  • Asynchronous Modules (Code Splitting)
  • Tree Shaking (Tree Shaking)
  • Uglify (Production) (uglifyjs-webpack-plugin)
    • This comes with Webpack 2 (Minification)
  • Sourcemaps (devtool)
    • (source-maps)
    • (devtool)
  • Linting (eslint)
    • Webpack Loader (eslint-loader)
    • Eslint Standard rules (eslint-config-standard)
    • Eslint Ignore Files (Ignoring Files and Directories)
  • Hot Module Replacement (NEED SOURCE)
  • Common Chunks (CommonsChunkPlugin)
  • Define Global Constants (define-plugin)
  • Stream (Dist) (webpack-stream)
• Image Support
  • Minification (gulp-imagemin)
  • Sprites (Sprite Image File) (gulp.spritesmith)
• Html Support
  • Includes (gulp-file-include)
• Font Support
  • Supported but no tooling, only copies from one folder to another.
• Unit Test Support
  • Karma test suite (karma)
    • karma-phantomjs-launcher
  • Jasmin framework (jasmin)
    • jasmine-ajax
    • jasmine-jquery
  • Test coverage
    • karma-spec-reporter
    • karma-coverage
    • istanbul
    • isparta-loader
• Utility Support
  • Conditional Pipe Control (gulp-if)
  • Pipe Cleaner (gulp-plumber)
  • Sequential or Parallel Tasks (run-sequence)
  • Deleting Files (del)
  • Consistent Code Formatting Rules (editorconfig)

Commands

TODO

Gettings Started

TODO

Environments

TODO: https://www.docker.com/

Linting

TODO

API

TODO

Unit test

TODO

Benchmarking

TODO: Benchmark.js with graphs / platforms to show performance and any degradation over time.