Sprockets for JavaScript

As a JavaScript newbie, a thing that some times puts me off when I see some libraries out there is the fact that they tend to be just the one big file, with long functions and tons of lines of code that is not that easy to follow.

Sprockets aim is to help out with this situation. As their website reads:

[Sprockets] helps you turn messy JavaScript into clean modules for development and a single file for deployment.

Sounds good to me!!! so how to get started? Reading the manual, of course!

The following is a quick a dirty guide to Sprockets and how to use it from the command line with the sprocketize command. I have created a really silly bunch of sample files that contain only dummy js functions and are here just to illustrate the use.

Installation

Installation is easy peasy through a Ruby gem. The only trick here is that if you are using rvm (and you should!) you will not need to use sudo, and if you are using your system Ruby it will probably be need. So let's do it:

gem install sprockets

And you are ready to go!

What else you need to know? Only two more things are needed: directives and the sprocketize command.

Directives

//=

Comments that start with the symbol above are considered directives, and they are used to pull in other resources that your project will use: other JavaScript files and any assets you use in the form of stylesheets, images, and so on.

There are two directives currently supported in Sprockets, require for other js files, and provide for other related assets. If the files are surrounded by quotes as in "myfile", then sprockets will only look for that file in the same directory. If is used, then all the load path will be searched for. That load path can be indicated to sprockets through the command line option.

So let's see some code: I have two files called my_file_1.js and my_file_2.js and I want them in just the one file for deployment. The contents of the files are:

my_file_1.js

function firstFunction() {
  // I do nothing really!!!
};


my_file_2.js

//= require "my_file_1.js"
function secondFunction() {
    // I do nothing but function one should appear before me
};

The Sprocketize command

There are different ways to use Sprockets being probably the Ruby library the most used. But the gem also bundles a command line tool which is a wrapper for the Ruby library so let's go with that cause it is really easy.

From the previous section we have two files called my_file_1.js and my_file_2.js and I want them in just the one file for deployment. To generate that concatenated file we can do:


sprocketize *.js > deployment_file.js

This will create a file called deployment_file.js with the following content:

deployment_file.js
function firstFunction() {
};
function secondFunction() {
};


You can see that firstFunction has been pulled in before the second one, and in the process all the comments and stuff that you don't need to deploy have also been stripped out. How nice is that!!!???


Hungry for more?
There is more about Sprockets that you can fin about in their manual. It is a great tool that I hope to start using soon.