by jl2 on July 15th, 2009

We’ve recently started using Sprockets to help us manage the Javascript classes we’re maintaining for mSpace2.0. Sprockets neatly helps solve the issue of dependencies in a Javascript environment.

For example:

var ListView = Class.create(ColumnSubViewInterface);

Here we’re creating a ListView Class that depends on the ColumnSubViewInterface Class, so the ColumnSubViewInterface must have been already defined otherwise the Javascript engine will throw errors. During development its easier to keep all your Classes in separate files but with the example shown this leads to there being an order with which to include the files.

Enter Sprockets! By using the specially formatted comment blocks that Sprockets provides you can define dependancies right within your Javascript files.

For example:

//= require "ColumnSubViewInterface"

Sprockets is written in Ruby and can be run on the command line (instructions here) to produce one large concatenated file, with each Class included in the order required. This is great for deployment but not so great whilst still in the development stages where its much easier to have each Class separately included from your HTML page.

To solve this problem I wrote a small PHP script that will parse a Javascript file looking for the ‘require’ comment block and recursively parse each included file. Instead of concatenating each script it outputs an appropriate <script> tag. The scripts parses your application in a depth first recursive manner. Some of the code was inspired by Kjell’s version of PHP Sprockets

Here is the script:

 * PHP Development Sprockets
 * @author Joe Lambert
 * @version 1.0
 * @copyright 2009 Joe Lambert
$outputted_files = array();
$url_prefix = dirname($_SERVER['SCRIPT_FILENAME']);
parseFile("mSpace", dirname(__FILE__));
function parseFile($filename, $directory)
	global $outputted_files, $url_prefix;
	$path = "$directory/$filename.js";
	$file = file_get_contents($path);
	preg_match_all('/\/\/= ([a-z]+) ([^\n]+)/', $file,  $match)
		$commandRaw = $matches[0][$key];
		$commandName = $matches[1][$key];
		$param = trim(trim($matches[2][$key]), "\"");
		if($commandName == "require")
			// Recurse
			parseFile($param, dirname($path));
	$dump = explode('/', $filename);
	$filename_only = $dump[count($dump)-1];
	if(!in_array($filename_only, $outputted_files))
		$realpath = realpath("$directory/$filename.js");
		$index = strpos($realpath, $url_prefix);
		$web_path = str_replace($url_prefix, '', $realpath);
		$web_path = substr($web_path, 1);
		$outputted_files[] = $filename_only;
		echo '<script src="'.$web_path.'" type="text/javascript"></script>';

Download sprocketize.php


Place the sprocketize.php file in the root directory of your Javascript files and change the line:

parseFile("mSpace", dirname(__FILE__));

Replace “mSpace” with the name of your main Javascript file – this should be the root Class of your Javascript project, from which all other Classes are included

Include sprocketize.php in your HTML page:

<?php include("js/mspace/sprocketize.php") ?>
Share and Enjoy:
  • email
  • Print
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Technorati
  • StumbleUpon
  • Slashdot
  • Ping.fm
  • LinkedIn
  • Google Bookmarks
  • MySpace
  • Netvibes
  • Reddit
  • Tumblr

From Javascript, PHP, UI

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS