Automatic javascript generation on constantly changing websites

This time I will discuss something I wrote for myself.

The problem:

I'm (and maybe you are) constantly developing my application, adding features and closing bugs, both to PHP and Javascript pages. When it comes to PHP, there is no issue, we simply update the last version to the server and forget about it.
With Javascript, however, this is a bit more complicated.

To fully understand the situation, place yourself into the CTO's shoes. We want bugs closed, we want new tricks and we want it to work and fast. When it comes to performance, the first (or second) rule in the book is to minimize and minify javascript files that the website works with. Why?

  1. Each javascript file we load with the <script> tag is actually causing the client's browser to create a separate request to fetch it. Multiple requests are huge overhead, that's why we want to load as little as possible JS files.
  2. Each javascript file contains unnecessary characters like newline, tabs, comment etc. Why not remove them? This process is called minification and it can shrink the JS file by 20-30% while keeping it fully functional. Great!

So here comes the real headache...
We develop and code and debug and test and finally, it's deployment time. But wait! Shouldn't we combine all out JS source files into one file? And why not minify it on the way? Doing this over and over for each small change, it a pain.
Furthermore, what about different sections on out app that require different JS scripts? We surely don't want to serve the client with scripts he doesn't need!

So here is my solution:

I created the JSLoader class, which takes care of generating a combined javascript files according to the JS sources needed for a specific section, minify it and serve it to the client. It will cache the combined JS files for later, so the same combinations will not be re-generated. Nevertheless, if you change one byte in any JS file, it will re-generate the appropriate files.

How do you use it? It's quite simple. You just have to be familiar with PHP5.

Installation:

  1. Create a web-available folder for the generated Javascript files.
  2. Give the above folder write permissions for PHP.
  3. Copy the JSLoader package to your project or clone it from:
    git clone git://github.com/oyagev/PHP-JSLoader.git

How-To:

1. First include or require the class file:
require_once '../lib/JSLoader.php';

2. Everywhere we want to use this class, we have to retrieve its instance:
$jsloader = JSLoader::getInstance();

3. Next, we do one-time configuration:

$jsloader->setJavascriptFolder('/home/user/public/html/my_website/js'); 
$jsloader->setJavascriptFolderURL('<a href="https://www.my-website.com/js'">https://www.my-website.com/js'</a>);

The first line sets the absolute path to where the combined JS files will be placed. The second line sets a web available URL to the same directory.

4. Now here is the real thing! Everywhere you want to “include” a javascript file, you do:
$jsloader->add('/absolute/path/to/file.js');

The above line should go each time you need to include a js file and you should pass the absolute path to that file. Also remember to retrieve the class’s instance when needed. See section 2.

5. Finally, you should place a <script> tag to include the generated combined JS file. Fortunately, JSLoader does it for you. Just place this code (once) where needed:
$jsloader->putScriptTag();

6. Check your page source to see if the file was included and that it’s available.