Coder Social home page Coder Social logo

Multi-Property Build-System

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

Demonstrating the Multi Property Build System

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.

How does the Multi-Build System Work?

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.

References

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

Accredible's Projects

Accredible doesn’t have any public repositories yet.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.