Create a JavaScript Framework using Mootools – Part 5: Compress your Framework

Compress your Framework

Now that you have your Framework create in yourlibrary.js, you might want to save some space using a compressor. I will present two famous one that I used before. First step is to create a compressor folder.

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
–|-packager/
–|-compressor/
–|-yourlibrary.js

JsMin

git clone https://github.com/rgrove/jsmin-php

Go get the latest version of jsmin.php here: and copy it inside the compressor folder.

Open your build.php file and add the highlighted rows:

<?php
// include the packager library
require dirname(__FILE__) . '/packager/packager.php';

// include the compressor library
require dirname(__FILE__) . '/compressor/jsmin.php';

// List of Package needed
$packages = array('mootools-core', 'mootools-more', 'yourLibrary');

// Register all the packages needed to create your Framework
$pkg = new Packager($packages);

// List of Component needed for Core. These are just examples, you might need more
$core = array('Core/Core', 'Core/Array', 'Core/String');

// List of Component needed for More. These are just examples, you might need more
$more = array('More/Fx.Accordion', 'More/URI', 'More/Fx.Scroll');

// List of Component needed for More
$yourlibrary = array('yourLibrary/MyFirstClass', 'yourLibrary/MySecondClass');

// List of all Component needed
$components = array_merge($core, $more, $yourlibrary);

// Create the yourlibrary.js file
$pkg->write_from_components('yourlibrary.js', $components);

// create a compressed version of yourlibrary.js
file_put_contents('yourlibrary_compressed.js', JSMin::minify(file_get_contents('yourlibrary.js')));
?>

–Or–

YUI Compressor

Yahoo UI Compressor is an open source tool that supports the compression of both JavaScript and CSS files. In addition to removing comments and white-spaces, YUI Compressor obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

Go get the latest version here: https://github.com/yui/yuicompressor/blob/master/build/ and copy it inside the compressor folder.

Usage: java -jar yuicompressor-x.y.z.jar [options] [inputfile]

YUI Compressor doc

We are now done with this tutorials in 5 parts. I hope it was helpful. Any questions, comments let me know.

• Part 1: Clone Mootools Repositories
• Part 2: Create your Package
• Part 3: Create your first Class
• Part 4: Use Packager
• Part 5: Compressed your Framework