A current Angular.js application I am working on has a requirement to show the application version number on the login page.  I wanted to find a solution that would both update the version number automatically and also store the version number in a way that the Angular application could reference to display on the UI.

Since we are already using Gulp (Gulp is a javascript task runner) to automate several application tasks, I started by checking whether there are any available gulp plugins to accomplish this.  What I found was that there are a couple of tasks that can be used together to get the solution I want.

Versioning with gulp-bump

The gulp-bump plugin will “bump” up the version number in a json file within the application.  The json file can be as simple as this:

1  {
2       "version": "0.0.10"
3  }

You need to include this line in the gulpfile:

var bump = require('gulp-bump');

The gulp task looks like this:

gulp.task('bump', function() {
     return gulp
          .src('./config.json')
          .pipe(bump())
          .pipe(gulp.dest('./'));
});

Let’s break this down:

1. In line 90, we tell gulp to use the config.json file as the source of the version information
2. In line 91, we execute the bump function, which updates the config.json file in memory with the new version number
3. In line 92, we write back to the config.json file

That’s all there is to it.  There are some defaults that can be overridden by passing an options hash to the bump function, but as-is the bump function will look for the “version” tag in the json file and increase the patch number by 1.  To run the task I can type “gulp bump” from the command line.  After running the task my config.json now looks like this:

{
     "version": "0.0.11"
}

By default the patch number is updated, but the major and minor version number can be bumped by passing {type:’minor’} or {type:’major’} to the bump function.

Angular constants with ng-constant

Ok so now what?  We have a config.json file with the application version in it.  So do I have to write javascript code to read the file and parse the json to get the version number to display?  No – we can do better.  Let’s check out ng-constant.

This part of the solution is not strictly a gulp solution – it also utilizes a feature of Angular called constants.  Angular constants are defined like this:

app.constant(name, value);

So for example if we wanted to store the version number as a constant it would look like:

   app.constant('version', '0.0.11');

To access this constant in any controller or service you just need to inject version in the function definition:

function loginController(version) {
   //...
}

The question then is how do we turn the version number in our config.json into a constant definition?  Well that’s where ng-constant comes in.  What ng-constant lets us do is to create a module with constant definitions based on a json file.  Which is exactly what we want to do.  The gulp task we need to use looks like this:

gulp.task('config', ['bump'], function() {
     var configJson = require('./config.json');
     return ngConstant({
             constants: configJson,
             stream: true,
             name: 'app.constants'
          })
          .pipe(gulp.dest('./www/app/core'));
});

Let’s break this down line-by-line:

1. Line 101: defines the name of our task (config), and also specifies that the bump task runs prior to config starting.
2. Line 102: there’s the config.json file we are using the bump task to write the version to.  This loads the json into the configJson variable.
3. Line 104: we specify the json that is to be used to create the constant definitions
4. Lines 105: setting stream to true allows the task to be piped to other gulp tasks (in this case, gulp.dest)
5. Line 106: the name of the angular module
6. Line 108: the folder to write config.js to.  By default the name of the file with the module is called constants.js

We run the gulp task from the command line using “gulp config”.  When the task completes, a file called constants.js is created that looks like this:

angular.module("app.constants", [])

.constant("version", "0.0.11")

So now in my loginController I can inject version in the function definition and then set a property on the $scope to expose the version to my view:

     $scope.version = version;
     $scope.buildType = 'development';

We have a “gulp serve” task that starts the web server and opens the browser.  By adding the “config” task to the tasks that run prior to serving the app, the version gets bumped automatically every time the app runs, and the updated version is always shown on the login page.

Reminder – you need to include the app.constants as a dependency in the application definition:

var app = angular.module('app', ['app.constants']);

This example is a very simple use of two gulp tasks to get us to a nicely automated version solution.  From here it would be easy to add some configurable options to the gulp tasks to maybe include the environment (development, test etc), or bump the major/minor versions instead of the patch.

Looking for a new job? We work with some of the biggest names in tech, and we’re hiring! Check out our open jobs and make your next career move with Planet.