/Main_Page

::You must have ninja focus to complete your mission::NinjaFocus::

Javascript and CSS Compression

Views:


If you want to make your web pages or your web application as fast as possible then you need to compress the hell out of everything. Not every one has a super fast broadband connection, and not all super fast broadband connections are fast all of the time. You can get your web server to compress text content but this doesn't work for all browsers (IE). In any case you need to get your files as small as possible before they're compressed.

Trying to write code with out comments or sensible white space will bite you, so the best method is to strip unnecessary content from the files before publishing them on your web server.

For javascript compression there is the excellent yuicompressor from yahoo. For css there are some tools available but they give mixed results (including the one I've written). I found that yuicompressor broke some of my CSS rules - and this is the same problem I had with other tools. (I like to mix up @media and @font-face rules in my css so that might have something to do with it.)

To tie it all together you can either use a deployment server or, like me, pony out for a simple bash script.

There is a simple convention that needs to be followed: name your source files - the ones with the comments and white space - with an alternative file extension like "src.js" and then you can just run the script to process your files.

bash script

This is only a basic script - you need to specify the path to the root folder of your application in the APP_ROOT variable, then you can list all of the files that you want to be compressed. The script will add "src." to the file extension. The script will automatically overwrite your target files with the compressed versions of the source files

You need to specify the paths to your CSS compressor and the JS compressor also. - Code for a CSS compressor follows in the next section.

#!/bin/bash
APP_ROOT="/var/www/vhosts/my-amazing-web-app/";
CSS_COMPRESSOR="${APP_ROOT}/bin/compresscss.php";
JS_COMPRESSOR="${APP_ROOT/java/yuicompressor-2.4.1/build/yuicompressor-2.4.1.jar
YUI_COMPRESS=`cat <<END_OF_YUI_COMPRESS_CONFIGURATION
htdocs/assets/js/k.js
htdocs/assets/js/site.js
htdocs/assets/js/admin.js
END_OF_YUI_COMPRESS_CONFIGURATION`;
CSS_COMPRESS=`cat <<END_OF_CSS_COMPRESS_CONFIGURATION
htdocs/assets/css/styles.css
htdocs/assets/css/ie.css
htdocs/assets/css/ie6.css
htdocs/assets/css/ie7.css
htdocs/assets/css/ie8.css
htdocs/assets/css/admin-screen.css
htdocs/assets/css/admin-ie.css
htdocs/assets/css/admin-ie6.css
htdocs/assets/css/admin-ie7.css
htdocs/assets/css/calendar.css
htdocs/assets/css/richtext-styles.css
END_OF_CSS_COMPRESS_CONFIGURATION`;

SED=`which sed`;
JAVA=`which java`;
RET=0;

echo "${YUI_COMPRESS}"|while read PATH;
do
    TARGET="${PATH}";
    SOURCE=`echo "${PATH}" | "${SED}" -e 's/\.\([0-9a-zA-Z]\{2,3\}\)$/.src.\1/g'`;
	if [ -e "$APP_ROOT/$SOURCE" ]
	then
    	echo "Compressing ${SOURCE} in to ${TARGET}";
    	$JAVA -jar "${JS_COMPRESSOR}" --charset UTF-8 "${APP_ROOT}/${SOURCE}" > "${APP_ROOT}/${TARGET}";
	else
		echo "Source File ${SOURCE} does not exist";
		RET=1;
	fi;
done;

echo "${CSS_COMPRESS}"|while read PATH;
do
    TARGET="${PATH}";
    SOURCE=`echo "${PATH}" | "${SED}" -e 's/\.\([0-9a-zA-Z]\{2,3\}\)$/.src.\1/g'`;
	if [ -e "$APP_ROOT/$SOURCE" ]
	then
    	echo "Compressing ${SOURCE} in to ${TARGET}";
    	$CSS_COMPRESSOR "${APP_ROOT}/${SOURCE}" > "${APP_ROOT}/${TARGET}";
    	#$JAVA -jar "${JS_COMPRESSOR}" --charset UTF-8 "${APP_ROOT}/${SOURCE}" > "${APP_ROOT}/${TARGET}";
	else
		echo "Source File ${SOURCE} does not exist";
		RET=1;
	fi;
done;



exit $RET

CSS Compressor

Works for me. YMMV. This script will strip white space and comments from the CSS unless the comments begin with "/*!" - this is useful for preserving copyright notices. What it won't do, like some others, is optimise your css and actually re-declare some of your rules to use, for example, short hand rules.

#!/usr/bin/php
<?php

if (	isset($_SERVER['argv']) && isset($_SERVER['argv'][1]) && 
		is_string($_SERVER['argv'][1]) && is_file($_SERVER['argv'][1])	){
			
	$css = file_get_contents($_SERVER['argv'][1]);
	$patterns = array(
			'#/\*(?!\!).*?\*/#s' => '',
			'/\s\s+/' => ' ',
		//	'/\s$/' => '',
			'/\n\n+/' => "\n",
			'/:\s/' => ':',
			'/\{\s/' => '{',
			'/\s\{/' => '{',
			'/\s}/' => '}',
			'/;}/' => '}',
			'/\s;/' => ';',
			'/;\s/' => ';',
			'/,\s/' => ',',
			'/\s,/' => ',',
			'/\}\s\./' => '}.',
			'/\n/' => '',
			'/^(@charset\s+".+";)/i' => "$1\n",
			'/\}\s/' => '}',
		);
	$replacements = array_values($patterns);
	$patterns = array_keys($patterns);
	$css = preg_replace($patterns, $replacements, $css);
	echo $css;
} else {
	echo "\nFirst argument must be the CSS file to compress\n";
	die;
}


// closing PHP tags is for wimps

Main Menu

Personal tools

Toolbox