Workflow with (non-) minified js/css files for development and production

Question

I'm looking for a way to structure my workflow so I don't get confused/into trouble when working with "uncompressed" js/css files for development and minified ones for production.

I don't want to have two html versions (one with development and one with minified js/css files) of the same source. Or do I have to?

Also whats the best way to automate the actual minify process?

NOTE: I'm looking for a local solution. Server side is not an option.

Answer 1

I've been using this in PHP – you might use it for inspiration:

<?
$test_server = $_SERVER['SERVER_NAME'] == "127.0.0.1" || $_SERVER['SERVER_NAME'] == "localhost" || substr($_SERVER['SERVER_NAME'],0,3) == "192";

function caching_headers ($timestamp) {
global $test_server;    
    if (!$test_server) {
        $gmt_mtime = gmdate('r', $timestamp);

        if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
            if ($_SERVER['HTTP_IF_MODIFIED_SINCE'] == $gmt_mtime) {
                header('HTTP/1.1 304 Not Modified');
                exit();
            }
        }

        header('Last-Modified: '.$gmt_mtime);       
    }
}


header ("Content-Type: application/javascript; charset=utf-8");

include ($_SERVER['DOCUMENT_ROOT']."/media/js/jsmin.php");

$libs = explode("|",$_GET['libs']);

$uniq_string = "";

foreach ($libs as $lib) {   
    $uniq_string .= filemtime($_SERVER['DOCUMENT_ROOT']."/media/js/$lib.js");
}

$hash = md5($uniq_string);

$cachefile = $_SERVER['DOCUMENT_ROOT']."/cache/".$hash.".js";

if(file_exists($cachefile)) {
    $last_mod = filemtime($cachefile);

    caching_headers ($last_mod);
    include($cachefile);
    echo "//Cached on ".gmdate('r', $last_mod)." to ".$hash;
    exit;
} else {
    $combined = "";

    foreach ($libs as $lib) {   
        if (substr($lib, strlen($lib)-3, 3) == "min") {
            $combined .= file_get_contents($_SERVER['DOCUMENT_ROOT']."/media/js/$lib.js")."\n";
        } else {
            $combined .= JSMin::minify(file_get_contents($_SERVER['DOCUMENT_ROOT']."/media/js/$lib.js"))."\n";          
        }
    }

    $fp = fopen($cachefile, 'w'); 
    fwrite($fp, $combined);
    fclose($fp);

    $last_mod = filemtime($cachefile);

    caching_headers ($last_mod);    
    include($cachefile);
    echo "//Cached on ".gmdate('r', $last_mod)." to ".$hash;
}

?>

alongside JSMin-php.

I then use:

<script src="/media/js/combined.php?libs=jquery-1.5.1.min|behaviour|jquery.form"></script>

in my pages.

It stores the cached minified file at /cache/, so make sure that folder exists if you are trying this.

Answer 2

Currently the best solution is the HTML5 boilerplate build script.

Beware that there is a learning curve before being able to use the complete power.

Also it's worth mentioning, that the build script optimized for websites, where every page uses the same JavaScript and CSS files. So if you have certain pages, that have additional CSS and JavaScript files that you want to have optimized/minified you might need to do this separately.

The script also compresses HTML and (optionally) leaves PHP stuff untouched.

HTML5 boilerplate build script is awesome. It's open source, please contribute!

Note: Most of my infos are 3+ month old. Let me know about new developments.