Picture

Hi, I'm Boopathi Rajaa.

Hacker, Dancer, Biker, Adventurist

Writing your own JavaScript build system

I'm assuming that Google Closure compiler is one of the best JS compilers, and ll be using their API " closure-compiler.appspot.com" in this tutorial. Also, I'm going to assume that you must be writing coffee-script and you have coffee-script compiler pre-installed on your system. Don't get demotivated or threatened by seeing the words "build system". We are actually making a script that automates the final step in our development process, and makes the workflow a little swifter.

The gist of this is, we write coffee-script, use coffee-script compiler to compile our code to plain JavaScript, we feed this JS code to Google Closure Compiler along with the link to libraries that our code depends on, we get the output from the Google Closure Compiler API, and we export that to a file in our repository.

1. Coffee-Script to JavaScript

From various resources and a little of personal experience, the conclusion is - the subprocess module in Python suits the need fairly well.

    command = ['/usr/bin/coffee','-cp','./path/to/file.coffee']
    process = subprocess.Popen(command, stdout=subprocess.PIPE)
    js_code_1 = process.communicate()[0]

The code is pretty much simple and is self explanatory. For those who are not familiar with Python, the gist of the above code is this

    execute the command '/usr/bin/coffee -cp ./path/to/file.coffee'
    grab the output to some variable instead of throwing it to the system STDOUT

2. Grab plain JavaScript

This can be viewed in two ways. One is that you don't write coffee-script. The other is, you write some coffee-script and then you'd want to add some plain JavaScript too. Once again, if you're not familiar with Python, grab the file contents to some variable. Python users, this might be one of the best ways to grab file contents into a variable.

    with open('./path/to/script.js') as javascript_file:
        js_code_2 = javascript_file.read()

 3. Collecting dependencies

This section is just blah. You've to fetch the URLs of the libraries that you use. It doesn't matter if that is not a minified version. Google Closure Compiler would handle that for you. If you don't have a permalink to your library, clone that to your system and follow the previous step to grab it's contents.

4. Sending request to Google Closure Compiler API

Send a HTTP - POST request to 'closure-compiler.appspot.com/compile' with the content-type "application/x-www-form-urlencoded". Grab the response to some variable. This would represent the minified/compiled JS code. Now you can throw this to some file.

The following POST variables are important while requesting the API.

  • code_url : the permalink to your library code
  • jscode : the contents - plain JavaScript code. ( jscode1  and jscode_2  from the previous sections)
  • compilationlevel : 'SIMPLEOPTIMIZATIONS' . Refer the API for more options.
  • output_format : 'text'
  • outputinfo : 'compiledcode'

Download and Use:

Have uploaded a sample working Python code.  https://gist.github.com/boopathi/4944562

To get the script,

    wget https://gist.github.com/boopathi/4944562/raw/3bd83077ef3081eaedc5d74712a09fc0981e8f1d/jscompile.py && chmod +x jscompile.py