Automagically Minify CSS and Javascript on Upload

Question

Does anyone know of a good way to automatically run certain file types through a processing script on upload? I'm trying to accomplish automatically minifying CSS and Javascript when I upload them to the server, keeping a nice, human-readable version on the local side while keeping a minified one on the server. I'm currently using WinSCP on Windows, which is scriptable to some degree but might not be scriptable enough. I'd probably need some kind of cobbled-together solution, so don't be afraid to suggest something with duct tape in it; however, I do need to do the minification on my local computer and upload the squished file, since I use shared hosting and can't install junk on the server.

Thanks.

Answer 1

Well, to minify CSS is just a couple of regexes.

// (PHP) but should be easily portable to any language
function compressCSS($css) {
    return
        preg_replace(
            array('@\s\s+@','@(\w+:)\s*([\w\s,#]+;?)@'),
            array(' ','$1$2'),
            str_replace(
                array("\r","\n","\t",' {','} ',';}'),
                array('','','','{','}','}'),
                preg_replace('@/\*[^*]*\*+([^/][^*]*\*+)*/@', '', $css)
            )
        )
    ;
}

And Dean Edwards's Javascript packer has been ported to PHP, Perl, .NET and WSH, so if you're using any of those technologies, you could actually have it running on your own server. ...Just remember to cache the results!

Answer 2

I recommend creating a makefile to solve this particular problem, here's a quick and dirty makefile I'm using for a site of mine:

PUBDIR=../../static/js/
OUTDIR=./build/
COMPRESSOR=../yui/build/yuicompressor-2.4.2.jar
ARGS=
VPATH=${OUTDIR}
INST_TARGETS=${OUTDIR}jgblue.js

jgblue.js: combined.js
    java -jar ${COMPRESSOR} ${ARGS} ${OUTDIR}$< -o ${OUTDIR}$@

combined.js: main.js listview.js tabs.js
    cat $^ > ${OUTDIR}$@

.PHONY: install

install:
    cp ${INST_TARGETS} ${PUBDIR}

Then all you have to type is:

make && make install

First it takes all of your development files and concatenates them into a single file, then the concatenated file gets compressed and copied into your public directory. I'm using YUICompressor for compression, it works quite well.

Answer 3

I like Minify. It supports compressing and trimming html, javascript and css on the fly.

It is quite flexible, an can be integrated into existing apps.

Some of the more advanced features is combining multiple javascript files into one, same for css. It has multiple ways of defining which files to combine, which is usefull for testing purposes. This way you do not have to modify the settings every time.

Answer 4

I suggest compressing (by all means in some automated way) on your development machine and testing it there before uploading to your live server. Fundamentally changing your JavaScript as the last stage of your deployment process is an obvious risk for introducing errors.

Answer 5

Since you're on shared hosting, I'd just suggest using the YUICompressor, and running your css/js files through it prior to uploading them. Be sure not to lose your original files - it could be a pain making future changes.

You could also place a script on your server that would periodically re-write your css/js files, passing them througha minify-process, and manually invoke this script after doing an upload.

Answer 6

I just wrote this minfier script in python. Like Bills solution, it uses the YUI compressor, but will work in a make-less environment. It assumes that the raw (unminifie) files will be in /some/path/src/, and that the minified versions should go in /some/path/. It also assumes that the yuicompressor jar file is in the current folder:

import os, glob
from subprocess import Popen,PIPE

def RunCommand( cmd, show_output  ):
    p = Popen(cmd, shell=True,stdout=PIPE,stderr=PIPE)
    for line in p.stdout:
        if show_output:
            print line


    outerr = "\n".join(p.stderr.readlines() )   

    if len(outerr) > 0:
        print "ERROR: " + outerr
        sys.exit()

    code = p.wait()         
    if ( code > 0 ):
        print ("ERROR CODE: %i" % code )
        sys.exit()



compresser = "yuicompressor-2.4.2.jar"
dirs = [ "../wwwroot/css/", "../wwwroot/JavaScript/"]

extensions = ["*.js", "*.css" ]

for dir in dirs:
    src = dir + "/src/"
    for ext in extensions:      
        for path in glob.glob( os.path.join( src, ext)):
            file = os.path.basename(path)
            src_file = os.path.normpath( src + "/" +  file )
            dest_file = os.path.normpath( dir + "/" + file )
            if not os.path.isfile(dest_file) or os.path.getmtime(src_file) > os.path.getmtime(dest_file):
                print "minifying %s..." % (dest_file) 
                command = "java -jar %s %s -o %s" % ( compresser, src_file, dest_file )
                RunCommand(command, True)