Full of lovely web standards information and a large helping of PHP

Adding JSMin to my CSS/JS merging script

1 year, 4 months ago

I've extended my CSS/JS merging script to support piping the merged output through JSMin, assuming you're merging JavaScript of course. The result is a significantly lower file size. As the resulting file is cached to disk the minification process will only be run once rather than on each request.

I've resisted writing a new PHP version of JSMin (there is already a command line version) and have instead used Douglas Crockford's original C version run through shell_exec.

Note: To use shell_exec you'll need to ensure the installation of PHP on your server isn't using safe_mode. Web hosts which don't impose safe_mode restrictions include DreamHost and Media Temple.

Compiling JSMin

Start by downloading the JSMin C source and copy to a suitable directory on your server. Next run the following command in a shell window to compile to an executable binary:

  1. gcc -o jsmin jsmin.c

Assuming you have the GNU C compiler installed on your server this will create an executable named "jsmin". You can test that JSMin is running correctly by running the following command in a shell window:

  1. ./jsmin < code-to-compress.js

It should output the compressed code to the screen. To output to a file run:

  1. ./jsmin < code-to-compress.js > compressed-code.js

Mac Version

Stuart very kindly sent me a pre-compiled version you can use if running Mac OS X.

Configuring my Script

Once you're happy it's running correctly you need to download the latest version of my script and modify the following config lines appropriately:

  1. define('JSMIN_COMPRESS', true); // switch JSMin compression on or off
  2. define('JSMIN_PATH', ''); // full path to JSMin executable
  3. define('JSMIN_COMMENTS', ''); // any comments to append to the top of the compressed output

Edit and re-save one of your source files to trigger a new version complete with JSMin compression.

Comments

  • Sorry, I, for one, could not resist getting my hands dirty with the CLI version of jsmin.php...

    The results are available here (please forget the "just-a-little-bit-over-the-top" title of the post):

    Shrink the size of your javascript with js min (the php way)

    Gaetano Giunta - 22nd December 2006

  • Gaetano - thanks for the info. Your modifications look really cool - nice to have a PHP 4 version and making it work as an include is something I was considering doing - I won't have to now ;-). Once you're happy with it I'd suggest contacting Douglas to see if he'll include it in his list of available versions.

    Ed Eliot - 22nd December 2006

  • Since I'd rather keep safe_mode switched off I took Gaetano's PHP JSMin version and changed just a couple of lines in your script to adapt it for the use with PHP. The result is available directly or as part of my blog article about website performance tweaks.

    I haven't got further into it, but I think what prevents me from compressing CSS is stripped whitespace before ".", so

    #id .class

    gets a different meaning when it becomes

    #id.class

    Martin Kliehm - 27th January 2007

  • Martin - thanks for posting this info. I've been meaning to do exactly this for some time. It's great you've saved me the effort.

    Ed Eliot - 27th January 2007

  • Interesting! I'm just getting started with JS and CSS and came across this article. Thanks!

    Jen - 30th April 2007

  • Ed, here is my blog post on my changes to your solution. Mainly I support different bundles based on a page name string and different modes for CSS and JS.

    http://www.idealog.us/2007/05/customizations_.html

    Jeff - 27th May 2007

  • Jeff - Thanks for sharing - an interesting read.

    Ed Eliot - 27th May 2007

  • Thanks so much for this idea. I created a function that writes the file if needed and returns the filename to be include by the script tag. This works better with my framework.

    I also used the JS packer developed by Dean Edwards http://dean.edwards.name/. It creates a smaller file and also obfuscates the code.

    Troy - 28th December 2007

  • You might want to check out https://sourceforge.net/projects/CSSTidy to tap into the ability to minimize CSS as well (just needs to work with @import; feel free to submit a patch! :) )...

    Brett - 4th April 2008

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index