Develop, Build and Test multiple web-properties using a single task runner. Don't Repeat Yourself.

Installation

npm install gulp -g
git clone https://github.com/accredible/multi-property-build-system
cd multi-property-build-system
git install

Commands

The gulp command has optional --task, --property and --env arguments.

gulp - prompt for arguments

gulp
gulp --silent

gulp --task develop - start a development server

gulp --task develop
gulp --task develop --property dashboard --env red

gulp --task build - create production files

gulp --task build
gulp --task build --property dashboard --env red

gulp --task test - run tests

gulp --task test
gulp --task test --property dashboard --env red

Directory Structure

📁 build/ - properties build to, and serve from, this folder. 📁 env/ - multiple environment folders, copied to the active property before build. 📁 gulp/ - task runner logic. 📁 properties/ - multiple web properties. 📃 karma.conf.js - unit-testing config, runs within the active property.

How does this work?

I made a youtube video. Go forth and learn.

Featuress

• Must run for multiple properties
  • dashboard
  • certificate-standalone
  • directory
  • recipient
  • etc.
• Make the taskrunner easy to understand
  • Sensible organization
  • Sufficient documentation and comments
• build must:
  • Work for the correct property
  • Clean the /build/ directory
  • Compile CSS
    • SASS
    • Sourcemaps
    • Autoprefixer
    • Minification
  • Compile JS
    • Browserify
    • Sourcemaps
    • Uglification
  • Copy environment files
  • Copy static files
  • Cache-bust
    • Use token substitution
    • ...consider version bumping
    • ...consider using timestamp
• serve must:
  • Do all build things...
  • Watch for changes
    • CSS
    • JS
    • HTML
    • Assets
  • Serve files locally
  • Have Live-Reload / Browsersync
  • Open localhost when ready
  • Use gulp-newer for speed. See: web-starter-kit
• test must:
  • Run for a single property and environment
  • Run karma
  • Run e2e - see gulp-protractor
  • Functional on TravisCI

Bonus Features

Not on our MVP. But still good.

• Lint our files on change
• Make this README as awesome as the web-starter-kit
• Automatically bump the version with a pre-commit-hook
• Add Service-Worker pre caching. See: web-starter-kit

References

I've added references to each gulp task where appropriate. The following were my starting points:

• https://github.com/google/web-starter-kit - uses babel-register, which is nice, but also slow
• https://github.com/angular/angular-seed
• https://github.com/gusgard/angular-seed-es6
• https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate
• https://browsersync.io/docs/gulp