Automating front-end build processes using Grunt
- Matt Jennings
As front end development has become more and more complex over the last few years, developers have started to use a range of different tools for different purposes. Perhaps you are working on a simple project with an AngularJS front end.
Wow! Building this project is already turning into a really complicated and error prone process. You could write a script to build it, but that involves quite a bit of time and effort and you would need to teach each new developer on the project how to use your bespoke build script. This is where Grunt (http://gruntjs.com/) comes in.
What makes Grunt special is that it comes with a nice clean API for defining tasks, and a standard way of passing in configuration options to these tasks. The great thing about this approach is that modular tasks can be defined and then imported into different projects, where they are then configured for a specific use case. If we consider the example build process above, all of the steps can be covered by pre-built Grunt tasks that are freely available. See http://gruntjs.com/plugins.
Grunt is configured using a “Gruntfile” placed in your project. Within this file you can specify which pre-made tasks you would like to import, define custom tasks, configure tasks for your use case, and create aliases for sets of tasks. Developers can run the tasks in your project using the Grunt command line tool.
In this case, you would create a "test" alias that would use the “grunt-karma” task (https://github.com/karma-runner/grunt-karma) to run the unit and end to end tests. The configuration for each set of tests would be defined inside the Gruntfile. Great, now developers can run all of the tests at once with a single command - "grunt test". The build task is just as simple to set up, but involves a bit more configuration. You would need the following grunt tasks:
https://github.com/gruntjs/grunt-contrib-compass - This task runs Compass using configuration specified in your Gruntfile.
https://github.com/gruntjs/grunt-contrib-copy - A simple task that you can use to copy files.
These tasks are configured in the Gruntfile and a “build” alias is created that runs the “test” alias as well as the Compass, Copy and Usemin tasks. Now developers can build the entire project with one command - "grunt build".
Even though this is still a complicated build process behind the scenes, anyone can run it with this one simple command.
For tutorials and more information about Grunt, head over to http://gruntjs.com/. It’s a really great tool that has helped the front-end team at Nomensa simplify and speed up the build process for front-end code. If you can see the benefits of using Grunt, but are worried about the amount of work initially required to create your Gruntfile, check out Yeoman (http://yeoman.io/). Yeoman will create a Gruntfile for you, based on your answers to a few simple questions. To sum up, if your front-end build process is complicated and full of error prone manual steps, use Grunt to hide all of that complexity behind a simple “build” task!
Let's work together
We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.