Pressure is nothing more than the shadow of great opportunity. - Michael Johnson

Adding JSMin to my CSS/JS merging script

9 years, 8 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 #

  • Thanks for providing the Mac CLI for JSMin - much appreciated! It's now integrated into my XCode build process :)

    Dave - 18th June 2008 #

  • Hi everybody,

    sorry about my really nooby question, just getting into the whole php thing right now but caching seems to be a big plus and one reason more to learn it.

    The question: where do I put the whole PHP code? Let's say, I have a simple index.php (just renamed from index.html) and where do I now put the php code to combine all my js / css files??? Before the or even before the tag? Sorry again for that silly question^^, makes me laugh myself...

    thx 4 your help!

    LuK - 7th July 2009 #

  • You can also install JSMIN with Homebrew if you're using a Mac:

    http://mxcl.github.com/homebrew/

    Dana Woodman - 9th August 2011 #

  • Thanks your tutorial help me.

    ISALL - 19th March 2012 #

  • A good idea, very helpful

    john - 7th June 2012 #

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