Automate your grunt work

What was life like before Grunt? To the best of my ignorance, before the introduction of javascript task runners like Grunt or Gulp, I’m not really sure if there was a de facto for web development automation. Was it running cron jobs or using bash scripts, a combination of both? Maybe it was the work I did that didn’t beget serious thought of task automation, so my concern never led me to search for solutions. Grunt has definitely improved and eased the pain of a lot of “grunt work”, and it has lead me to consider automation before all projects now.

Where I really enjoy the time saving capabilities of Grunt, is when working with a platform called Veeva. Veeva is defined as:

a transformative sales effectiveness tool that combines the power of Veeva CRM with best-in-class closed loop marketing in a single application, delivering a highly intuitive, seamless and powerful user experience.

To give you a high level overview of the platform, or loosely to the extent I utilize it, it consists of a two main containers:

1. iRep — the iOS application that displays your CLM content. This ranges from sales tools and information, to the websites hosted on the app. FYI — websites are considered or called Presentations. These websites are able to run full screen on the iPad — using UIWebView.
2. CRM — Using Salesforce as a backend, this is where I would load content (Presentations), which are then accessible via iRep.

Where Grunt comes in, is when I need to load content. Lets first assume you have built the website (Presentation) and it now needs to be uploaded to Salesforce. In any generic case, your site structure is generally — or at minimum — one html file with whatever external assets. For the purpose of this example, we can use this structure:

MY_SITE/ --> index.html css/ images/ js/

But, you can’t simply load the parent folder with that content. The specification to load content is:

1. 1 Zip file — Must contain a folder at the root level named exactly as the ZIP file itself
2. An HTML file — Also named exactly as the parent ZIP file
3. All other relevant assets

So the final package would look like:

MY_SITE.zip --> MY_SITE/ --> MY_SITE.html css/ images/ js/

Presentations in practice are usually more complicated by nature, and whenever you’ve altered your source content, you need to re-package and re-upload to Salesforce.

Therefore, I've put together a grunt script to do the following:

1. Clean any existing build folders and/or ZIP files [grunt-contrib-clean]
2. Uglify and concat all javascript files [grunt-contrib-uglify]
3. Copy all source files into a new destination folder [grunt-contrib-copy]
4. Rename source file references in the new HTML files to match the compressed file names using ProcessHTML [grunt-processhtml]
5. In the destination folder, rename index.html to the MY_SITE.html [grunt-contrib-rename]
6. Finally, compress the new directory MY_SITE into a zip file named MY_SITE.zip [grunt-contrib-compress]
7. Upload!

See a boilerplate sample below ☺