Concatenating & minimising JavaScript Files in TextMate | Comments (1)
Posted in Apple, Code, Linux/Unix on 9th October 2006, 12:50 am by Stuart
This command for TextMate is a follow on to my post about creating commands in TextMate. In that post, two of the examples showed how to make use of JSMin (Douglas Crockford’s tool for minmising JavaScript files) from within TextMate. The last example in particular made it possible to minimise the selected files in the project drawer individually. Whilst this is useful it it’s own right, it’s also useful to be able to be able to merge a bunch of JavaScript files together into one big file which you then subsequently minimise with JSMin.
Creating on large file containing all of your JavaScript saves on http requests which is always a good thing. If you are using a library with modular includes such as the YUI, minimising all of the files together into one big file after you’ve finished developing makes a lot of sense.
First thing in making this command work is providing means to save the file somewhere. Thanks to Cocoadialog being bundled with TextMate it’s possible to use CocoaDialog in TextMate commands for this very purpose res=$(CocoaDialog filesave --title "Save as" ??with?extensions .js ) opens a save dialogue so that you can specify the path and name of the file you want your combined/minimised JavaScript file to be saved as.
The first draft of this command used the command cat to concatenate the files together and then pipe the output through jsmin. However there was a big problem with this approach as the special variable $TM_SELECTED_FILES doesn’t take into consideration the order that the files need to be minimised in. It’s quite likely that this would be important to you, for example; the YUI library won’t work if you don’t include the namespacing file first. To that end it was necessary to create some kind of mechanism to make re-ordering of the selected files possible.
I decided to use the html output in TextMate as this would mean I could use JavaScript to provide a way to reorder the files. First the script converts the list of files into a unordered list and then using brothercake’s brilliant docking boxes script made it really easy to make the list items draggable so that the user can simply re-order the files as required. Finally when the user presses the “minimise button” the script loops through the list items and passes them to the cat command which then pipes the output through jsmin.
In using this command I found that sometimes you might select a JavaScript file that you didn’t need so I’ve added a simple link that removes that list item to save having to start over.
A few of my colleagues at work have been testing this out, so I decided to package this all up as a bundle along with some simpler JSMin commands to make it easier to distribute. It’s all been fairly simply hacked together so please give it a spin and let me know if you have any suggestions or feedback.
Download the JSMin Bundle (29k)
Now go forth and minimise.
Awesome bundle, thanks a ton. If you find the motivation, it would be “nice” to have another task that just concatenated the files in the order of the list as well, as sometimes its convenient to have minified, and non-minified version. Thanks though, great tool.