scic/gulp-ng-config

Create AngularJS constants from a JSON config file

#gulp-ng-config

It's often useful to generate a file of constants, usually as environment variables, for your Angular apps. This Gulp plugin will allow you to provide an object of properties and will generate an Angular module of constants.

To Install:

npm install gulp-ng-config

How it works

It's pretty simple: gulpNgConfig(moduleName)

Example Usage

We start with our task. Our source file is a JSON file containing our configuration. We will pipe this through gulpNgConfig and out will come an angular module of constants.

gulp.task('test', function () {
  gulp.src('configFile.json')
  .pipe(gulpNgConfig('myApp.config'))
  .pipe(gulp.dest('.'))
});

Assume that configFile.json contains:

{
  "string": "my string",
  "integer": 12345,
  "object": {"one": 2, "three": ["four"]},
  "array": ["one", 2, {"three": "four"}, [5, "six"]]
}

Running gulp test will take configFile.json and produce configFile.js with the following content:

angular.module('myApp.config', [])
.constant('string', "my string")
.constant('integer', 12345)
.constant('object', {"one":2,"three":["four"]})
.constant('array', ["one",2,{"three":"four"},[5,"six"]]);

We now can include this configuration module in our main app and access the constants

angular.module('myApp', ['myApp.config']).run(function (string) {
  console.log("The string constant!", string) // outputs "my string"
});

Configuration

Currently there are a few configurable options to control the output of your configuration file:

• options.constants
• options.createModule
• options.wrap

options.constants

Type: Object Optional

You can also override properties from your json file or add more by including them in the gulp tasks:

gulpNgConfig('myApp.config', {
  constants: {
    string: 'overridden',
    random: 'value'
  }
});

Generating configFile.js

angular.module('myApp.config', [])
.constant('string', "overridden")
.constant('integer', 12345)
.constant('object', {"one":2,"three":["four"]})
.constant('array', ["one",2,{"three":"four"},[5,"six"]])
.constant('random', "value");

options.createModule

Type: Boolean Default value: true Optional

By default, a new module is created with the name supplied. You can access an existing module, rather than creating one, by setting createModule to false.

gulpNgConfig('myApp.config', {
  createModule: false
});

This will produce configFile.js with an existing angular module

angular.module('myApp.config')
.constant('..', '..');

options.wrap

Type: Boolean or String Default value: false Optional

Wrap the configuration module in an IIFE or your own wrapper.

gulpNgConfig('myApp.config', {
  wrap: true
})

Will produce an IIFE wrapper for your configuration module:

(function () {
  return angular.module('myApp.config') // [] has been removed
  .constant('..', '..');
})();

You can provide a custom wrapper. Provide any string you want, just make sure to include <%= module %> for where you want to embed the angular module.

gulpNgConfig('myApp.config', {
  wrap: 'define(["angular"], function () {\n return <%= module %> \n});'
});

The reuslting file will contain:

define(["angular"], function () {
 return angular.module('myApp.config')
.constant('..', '..');
});

Contributing

Contributions, issues, suggestions, and all other remarks are welcomed. To run locally just fork & clone the project and run npm install. Before submitting a Pull Request, make sure that your changes pass gulp test, and if you are introducing or changing a feature, that you add/update any tests involved.