jsMin Directories with xplorer2

jsMin is a JavaScript minifier written by Douglas Crockford. It’s a great little app first written in c which strips all white space, comments and carriage returns from JavaScript files in order to minify their size and reduce download time. I started to use the minifier using the python version of it which was translated by Baruch Even. It does a great job but was turning out to be a lengthy process for me to singularly minify each JavaScript file using the script so I have put together some added functionality which uses jsMin to minify whole directories of JavaScript files and more.

My wrapper for jsMin adds the following functionality;

• Minify a whole directory of JavaScript files.
• Allow minification of files in a whole directory tree recursively.
• Create’s development versions of files for further editing.
• Gives ability to reverse the minification of a directory turning development versions back and removing minified versions.

As well as explaining how the above functionality can be used I will also explain how to integrate the whole thing into xplorer2 so that these tasks can be run at the click of a button which makes it really easy.

So first things first, in order to use jsMin and my directory code you must have python installed on your machine. Once you have python installed then download the source for the script and copy it somewhere into you python path.

Once you have the script saved somewhere that python can find it then you can use it through a command line. All you need to do is navigate to the directory with your JavaScript files in and then use any of the following commands.

• python jsmin_dir.py
  This command will minify all .js files in the current directory. Before it minifies the files it creates development versions of each file by copying them and adding the -dev suffix to the file. It also checks for minified files that already have a -dev version and if found minifies the -dev version to a file with the same name without the -dev suffix.
• python jsmin_dir.py -r
  This command does the same as above but will look not only in the current directory but all child directories below it recursively.
• python jsmin_dir.py -u
  This command will undo minification within the current directory. What it actually does is finds all -dev versions of a file, deletes their minified none -dev versions and then renames the -dev version by removing the -dev suffix. You are then left with a directory as if you’ve never run the jsmin_dir script in it before.
• python jsmin_dir.py -u -r
  As before this is the same as above but with the added -r parameter the script will run on the whole directory tree.
• python jsmin_dir.py -o <myfile.js > myfile-min.js
  By using the -o parameter you can run the original jsmin script on a single file by specifying the input and output files. Note, you’ll also be able to run the original directly by typing python jsmin.py <myfile.js > myfile-min.js

In order to make using this script easier I have placed buttons directly into the file browser I use called xplorer2. Xplorer2 is a great app so I want to share how I did it so that other’s who enjoy the benefits of xplorer2 can use it. All you need to do is create four user commands for the first four commands listed above and add them to the toolbar. To create a user command just choose the customize menu > user commands > add new. Give the command a descriptive name, this is the name of the button when you add it to one of the toolbars. In the description you need to type out the exact command you would type as if you were in a command line but place a > character before it. The > parameter tells xplorer2 to run it as a windows command.

Once you have created a user command for each of the first four commands listed above then the next step is to add them as buttons to one of the toolbars in xplorer2. To do this choose the customize menu > toolbars then choose the toolbar you wish to add to, default is 0 Toolbar which was the one I chose. Then in the combo box on the right you will find the buttons you created named with the names you chose, just select each one and add it to your toolbar. So that’s it, now you can use xplorer2 to navigate to a directory with your JavaScript files in and simply press a button to run the appropriate jsmin command in that directory.

Download the source
Source code is only available in python and has only been tested in python 2.5 on MS Windows.