Live, Dev, Local Builds

Controlling what gets included for local, dev, and live builds can be very valuable in a single branch repo, so you can edit the same clone without pushing experimental or potentially insecure features to the dev or live builds.

During active development, it may be useful to exclude certain script or style additions from the live build and some additions may need to be excluded from the dev build and only tested locally. This repo's Grunt tasks offer a way to separate these concerns utilizing the grunt-preprocess module.

Note: All code changes are included in the local, dev, and live builds by default. You must explicitly define what is exclusive to a build by wrapping script/style additions with a unique comment syntax (see below).

Supported environments

Environment	description
local	Included only for builds when using a local dev stack such as Bitnami or WAMP
dev	Included only for the dev server build
live	Included only for the live server build

The environment exclusive builds are made automatically with the grunt dev and grunt live-build tasks. local and dev environment builds are both generated with the grunt dev task.

What can be environment exclusive

| local | dev | live

----|-------|-----|----- Angular Template | ✅ | ✅ | ✅ Javascript | ✅ | ✅ | ✅ LESS | ❌ | ✅ | ✅ PHP | ❌ | ❌ | ❌

Note: If desired, we can add support for environment specific PHP

How to make additions exclusive

You must wrap environment exclude code in comments, which define which environment to test for.

Environment exclusive builds are done using the grunt-preprocess wrapper for the preprocess NodeJS module. See the preprocess github page for full details on accepted syntax.

Javascript

// @if NODE_ENV='environment_type_here'
if (typeof NaN === 'number'){
   alert('What?! But NaN is not a number...');
}
// @endif

LESS

Because single line comments are silent in LESS, it is better to use block comment syntax

/* @if NODE_ENV='environment_type_here' */
if (typeof NaN === 'number'){
   alert('What?! But NaN is not a number...');
}
/* @endif */

Angular template HTML

Dev & Local build exclusive Angular template HTML

<!-- @if NODE_ENV='environment_type_here' -->
<div class="local-less">
   ...
</div>
<!-- @endif -->

Examples

Local build exlusive JS:

// @if NODE_ENV='local'
if ( ([] == []) === false ){
   alert('lol wut?');
}
//

Dev build exclusive Styles:

/* @if NODE_ENV='dev' */
.dev{
   &-less{
      font-size: 3em;
      font-weight: bold;
      color: #fff;
      background-color: rgba(255, 0, 128, 0.85);
   }
}
/* @endif */

The class .dev-less will appear for on local and dev server in main.css.

Note: The local environment loads dev specific styles, since local exclusive styles are not supported.

Dev & Local build exclusive Angular template HTML

<!-- @if NODE_ENV!='live' -->
<div class="dev-less">
   Oh I better not be seen on live. But I'm fabulous on dev and local environments.
</div>
<!-- @endif -->