At LevelEleven, we are doing some very heavy client-side applications on the Force.com platform. While the applications are served up on Visualforce Pages, most of the application is run on the client-side in Javascript, CSS, and HTML5. Because of this, the front-end code base was getting large. Along with the mass of Javascript that we were accumulating, we were also getting some very large CSS files and image directories. But as painful as managing this large code base is, the biggest pain is managing the deployment to and from the Force.com platform. We needed a way where we could easily make changes to our front-end assets, compile them to optimized files, then quickly deploy back to the platform in an iterative fashion. It was time to implement a “build” solution to automate this. We had several goal that we wanted to achieve:
- Iterate and deploy changes faster
- Make the code more stable
- Make the code more performant
Solution Needs
We were already starting to use a lot of pre-processors. For javascript, we were running jshint and uglify to get clean, compact, production-ready javascript. For CSS, we were leveraging Sass/SCSS for many of the same reasons. For deployment to force.com, we were using the force.com migration tool.
Boiling it down, I was in need of a solution that automated the following:
- Run jshint on the Javascript files to check for errors.
- Concatenate multiple javascript files together.
- Minify and compress the concatenated javascript file(s) using uglify.
- Compile/minify Sass/SCSS files into CSS.
- Copied all compiled assets and other resources into a temporary directory
- Easily zip up the contents of the temp directory into a .resource file
- Deploy the .resource file to force.com using the force.com migration tool
Grunt.js
Grunt.js is a task-based, configuration-based, build tool. While this is still a relatively new technology, grunt already hava a vast community built around the tool and plugins to do just about whatever you want to do. I selected grunt for my needs because of its “configuration vs scripting” approach to project builds. It allows me to quickly make major changes to my build steps with minimal tweaks to my Gruntfile configuration.
We chose grunt because it took care of steps 1-6 above with a combination of plugins and configurations. For the force.com deployment step(s), I wrote my own plugin to satisfy step 7.
grunt-ant-sfdc
I wrote this plugin last week to allow for force.com deployments as grunt tasks. I plan to expand this to also manage other metadata api operations such as retrieves but for now, the only task in there is antdeploy. For more information on the plugin, check out the project on Github. I’m also looking for some contributors on it so fork away!
Demo video
Here is a video I did showing how this all works together.
Files from the Demo
And the files that I used…
Resources
If you are new to grunt, check out these links to get you started:
- They have a great getting started guide.
- Here is a starter Gruntfile that uses a lot of the same plugins that I use here.
