#29: Getting Production Ready

We’re going to bring it back out to a normal text editor in this screencast, just as we started. In a “real world” situation, these things are true:

1. You want to break up your JavaScript into as many small files as makes sense to you. Just like we broke up the JavaScript code into small understandable functions, we can do the same with files. Remember var Movies = { }; That object would probably be it’s own file.
2. Those smaller files should be concatenated (combined together into one file) and compressed (ran through a minification system to remove whitespace and even rewrite variables and such to reduce final file size).

The tasks of concatenation and compression are so common that no matter what your workflow is there is probably a tool that will fit in to help.

CodeKit is Mac software that can help with this.

You have CodeKit watch your entire project folder. It will find JavaScript files inside of it (files that end in .js, or even .coffee if you prefer writing in CoffeeScript). Under the Scripts tab, it will list them all. You can click on one of them and then choose options for what to do when that file is changed and saved (by any text editor).

In the screenshot above, you can see on CSS-Tricks itself I have a global.js file which imports a number of other files (dependancies). When that file is changed/saved, it is checked via JS Hint, the the dependancies are appended or prepended as specified, then the final file is created (global-ck.js) and minified. Pretty cool!

You can manage those dependancies right through the CodeKit UI, but it’s probably best to do it through code comments right in the JS file itself:

// put BEFORE the rest of the code in this file
// @codekit-prepend "jquery.markitup.js"

// put AFTER the rest of the code in this file
// @codekit-append "prism.js"

You would then link up the -ck.js version of the JavaScript in the HTML.

What if you aren’t on Mac? You can Google around for alternatives. I’d link some up here but that world is ever-changing. I know for sure there are some that essentially copy the CodeKit look and functionality but work cross-browser and are open source.

---

Let’s say your project is Ruby on Rails. Rails has the Asset Pipeline which does this tasks for you as well.

Just like CodeKit has specially formatted comments to let it know what the dependancies are, the Asset Pipeline does too:

//= require libs/jquery.js
//= require common/love.js

var MyObject = {
 // yadda yadaa
}

You then link up that JavaScript file from your templates like:

<%= javascript_include_tag "admin/admin.js" %>

It’s a pretty nice system I think. For a few reasons. One is that in development the files will remain seperate, which is nice for debugging in the DevTools. Another is that after deployment the files will have cache-busting strings in the file names, which is an important step if you are serving far-out expires headers for good caching.

<script src="//assets.yoursite.com/assets/common/everypage-f2a6e496508e79e40a7f0ac730e91270.js" type="text/javascript"></script>

---

These aren’t the only two options either of course. There are probably countless ways to do this. Another very popular technique these days is Grunt.

You could use grunt-contrib-concat and grunt-contrib-uglify to do these “tasks”.

Here is a sample Gruntfile.js that would take a folder full of library dependancies and a global.js file and concatinate and minify them into a production.min.js file:

module.exports = function(grunt) {

  grunt.initConfig({

    concat: {
      dist: {
        src: [
          'js/libs/*.js',
          'js/global.js'
        ],
        dest: 'js/build/production.js',
      }
    },

    uglify: {
      build: {
        src: 'js/build/production.js',
        dest: 'js/build/production.min.js'
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['concat', 'uglify']);

};

Then simply typing “grunt” from the command line from your project folder will do that for you. Grunt can get way more fancy though, as you might suspect. Which will have to be another day!

I’ve put together an example project (for those of you with download access) so you can poke at to see how this Grunt thing works. The prerequisites:

• Have Node installed
• Have Grunt-CLI installed
• Run npm install from terminal in this directory

Then you can try running the grunt command and seeing it work.