Combining your javascript files into one file using Python

Since I've began to learn Python, I've had nothing but praise for this language. It's amazingly simple and at the same time powerful! And what I really like about it it's the way Python makes my life easier.

Consider today: I'm (still) working on a rather big in-house Javascript framework with a large number of scripts included in the header, since we are on the development phase. When everything will be completed, all the files would be combined into one, obfuscated and minified. But until then, we needed a quick way to test our app using only one file. Since we are talking about a complex framework, you can't simply combine the js files, a certain order must be respected.

I made a lazy javascript includer once, based on PHP, that took care of including all the js files found in my js folder automatically, but I had nothing to put them all together. I did have however two things: the knowledge that in the head section of my index.html file the scripts were included in the correct order... and Python!

It was actually very easy after I made the decision to use Python. Keep it in mind that I'm a noob when it comes it, still in the process of learning the process. And yet, Python makes things so simple for everyone.

First, we need to import the two libraries we are going to need: os, to handle the work with the filesystem, and re, for the regular expressions part, necessary to extract the scripts path.

import os
import re

Second step, we open and read the html file with the scripts.

f = open('index.html', 'rU')
src = f.read()
f.close()

The 'rU' tag tells the open function that we want to open the file in read mode.

After we have the html file content, retrieving the script paths is actually the simplest part:

scripts = re.findall('script\ssrc="(.*)"', src)

The findall method retrieves all the expressions found between 'script src="' and '"'. It places them inside an array. We then parse this array, open each script and copy its content inside an empty file.

Before we actually begin, I needed to save the current working directory inside a folder because I was in the following situation: I was running python in the root directory of my app, the one with the index.html file, and all my js files were inside a different folde ('html/js', more precisely)

#getting the current directory
cd = os.getcwd()


#putting all the scripts inside the js variable
js = ''
for script in scripts:
	path = cd + '/' + script
	f = open(path, 'rU')
	js = js + f.read() + '\n'
	f.close()

I added a new line after each file to make things easier to read.

Last but not least, I put the parsed content inside a new file, conveniently named all.js:

f = open('all.js', 'w')
f.write(js)
f.close()

This time, by using the 'w' option of the open file, all.js is opened in write mode: if the file does not exist, it's created. Otherwise its content is overwritten.

Piecing together the whole code, we get this:

import os
import re

#reading the source of the index files
f = open('index.html', 'rU')
src = f.read()
f.close()

#retrieving the script paths
scripts = re.findall('script\ssrc="(.*)"', src)

#getting the current directory
cd = os.getcwd()


#putting all the scripts inside the js variable
js = ''
for script in scripts:
	path = cd + '/' + script
	f = open(path, 'rU')
	js = js + f.read() + '\n'
	f.close()


#writing the content to file
f = open('all.js', 'w')
f.write(js)
f.close()

Simple. So simple and yet so helpful! Gotta love python