Building Your Own Ember App Kit Lite Part 8

Published April 12, 2014 by Toran Billups

In the previous post we added testem to help tighten the feedback loop as we write our ember app.

The last feature missing from our grunt configuration is deployment. We need to both uglify and change the final js file name based on a hash of some kind so we can use some aggresive caching techniques on our production web server.

The first step is to install both npm modules after adding them to the package.json file.

Next we need to load the npm modules at the top of our Gruntfile.js and add both tasks with a few basic options.

The uglify task will run first and the only real requirement is to tell grunt what the input/output file names should be. I'm being a little lazy in this example and using the same filename. If you want both files on your production server to help debug a deployment issue you might want to create a new file instead of using the same deps.min.js.

The hashres task has a few options worth mentioning. The renameFiles attribute means that it will literally find "index.html" given the path below (dest) and change the text "js/dist/deps.min.js" (src) to something unique instead. To be clear, this is the entire point of this plugin. This unique hash is based on the contents of your js file. The idea is that if you change this, your next deploy will generate a new hash making it possible for you to enable longer caching without the fear of users getting stale assets.

This post marks the end of my EAK-Lite blog post series. I'm looking forward to ember-cli and broccoli, but for now the grunt configuration I built during this series has proven to be effective for builds/testing/deployment.

The final working solution is on github. It contains a commit for each part in the series so you can follow along step-by-step. Any questions or comments please feel free to ping me on twitter!

Buy Me a Coffee

Twitter / Github / Email