Eric Bowden has over 19 years of software development experience around enterprise and departmental business productivity applications.
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.
The next step is to configure a Gulp task which will set appVersion equal to the version of the build (shown below).
An additional task uses replace to add the version as a query string parameter to script and css references, to work around browser caching.
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).
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.
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.
5 Comments
Kirk Liemohn
@disqus_NQpDmaIWny:disqus, thanks for this post. This will come in quite handy for me on my current project.
Kirk Liemohn
Finally got around to implementing this. Thanks again for the post. Note that I used yargs instead of minimist to get the arguments. It may be slightly easier to use than minimist, but it may not be as powerful or flexible as minimist.