Share and Enjoy !

My most recent project has been a custom integration, bringing Salesforce Chatter feeds into the user interface for Adobe Experience Manager. The project includes all the goodness of AngularJS such as custom directives, services, filters, templates and more. Apigee serves as the middle tier for single sign-on authentication and services.

Since AngularJS javascript applications do not require traditional compilation steps, it’s easy to overlook the importance and complexities of the build. However, there are a few key steps that must be performed for any release. One key step is versioning of the application.

I chose Gulp for build task processing and Visual Studio Team Services as the build platform. The two have worked well together for build tasks such as versioning of the application and build-time optimizations of css, javascript, and AngularJS templates.

The purpose of this post is to share a sample script, configuration and Gulp modules that are used for versioning the application.

gulp-replace

gulp-replace is used to apply the application version within script files and for script file references.

The first step is to add a version parameter within the script file. Once set, this version parameter can be rendered on an About page to identify the application version. The example below uses appVersion as the variable.

gulp

The next step is to configure a Gulp task which will set appVersion equal to the version of the build (shown below).

gulp

An additional task uses replace to add the version as a query string parameter to script and css references, to work around browser caching.

gulp

minimist

Another Gulp module called minimist is used to parse build parameters from the Gulp command line. We’ll use the –appversion command line option as a means for passing the build version from Visual Studio Team Services to the tasks (above).

gulp

Last, we’ll need to configure the build in Visual Studio Team Services to pass the build version into the Gulp task by adding the –appversion command line option.

gulp

Have you been creating Gulp tasks for an AngularJS application lately? Are you curious about the modules I’m using for optimizing css, javascript, and AngularJS templates? Let’s discuss in the comments section below.

Share and Enjoy !

Related Content: