Modern Web Development Best Practices Powered by Grunt.js Part 8: Version Numbers

This next tip in our series is not a performance enhancer but rather a best practice useful for keeping your codebase maintainable and to make it easier to track down bugs. This one is pretty obvious but overlooked way too often.

What Version Is This Anyway?

A version number is one of the first things you need to include in bug reports or technical support tickets, yet most web apps don’t have seem to have one. Version numbers are very useful when dealing with bug reports or “x feature is not working” messages from your users or clients, as it helps you narrow down where in the codebase a bug might be occurring. The number can be anything, as long as it can be easily incremented. It can also be an internal version number (not used for marketing purposes). I use and recommend the schema preferred by Semantic Versioning.

Tutorial:

“git checkout version”

“npm install”

To implement a quick version number for our app, we will use the “grunt-version” plugin. All we need to do is modify the “js-src/app.js” to include a version variable, like so:

App.VERSION = '0.0.0';

And then update the “grunt.initConfig” section to tell the plugin how to find that variable and where to search:

version: {

defaults: {

options: {

prefix: 'App.VERSION\\s+=\\s+[\'"]'

},

src: ['js-src/app.js']

}

}

By default, the plugin will look at the version property in the “package.json” file and replace the ‘0.0.0’ in the variable with that value. You can optionally point it to any file as long as it returns the correct format required. See this link for more options.

In the rest of this series, we’ll go over some other advanced concepts like CDNs, image optimization, and a few other tricks. We’ll also see how to use more Grunt.js features and plugins and how to implement them.  In the meantime, follow @CrederaMSFT on Twitter and Credera on LinkedIn for more great best practices.

To view the rest of the Modern Web Development Best Practices Powered by Grunt.js series click here.

• Grunt.js
• Modern Web Development Best Practices
• Grunt.js Tutorial
• Version Numbers