javascript - Workflow with (non-) minified jscss files for development and production - Stack Overflow

admin管理员组

文章数量:1424415

I'm looking for a way to structure my workflow so I don't get confused/into trouble when working with "unpressed" 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.

I'm looking for a way to structure my workflow so I don't get confused/into trouble when working with "unpressed" 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.

• javascript
• html
• css
• workflow

Share Improve this question Follow edited May 12, 2011 at 18:24 Aron Woost asked May 12, 2011 at 17:25 Aron WoostAron Woost 20.8k1313 gold badges4545 silver badges5353 bronze badges 6

• This would be a tool build into your server side deployment method. The integration tool depends on your server (PHP, .NET, ruby, etc) – Raynos Commented May 12, 2011 at 17:36
• We use jawr. In development we set debug true and in production we set debug false. When we set debug as false, the scripts and other resources will depressed in client, so you can see your code. – user405398 Commented May 12, 2011 at 17:38
• In my case server side is not an option. – Aron Woost Commented May 12, 2011 at 17:41
• @AronWoost did you ever e up with a workflow that suits you? I'm working on a static HTML + JS project now, and having my script conversions as build steps (while clean and simple) is a pain. I prefer to just edit the source, then refresh the browser -- so I point my html to "script/_src" during dev, and tweak that to "script" on deployment. It's a pain, and I'm sure that I'll miss a step one of these days. – groundh0g Commented Nov 12, 2011 at 16:00
• @groundh0g I just answered this question. – Aron Woost Commented Nov 25, 2011 at 9:52

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 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 {
    $bined = "";

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

    $fp = fopen($cachefile, 'w'); 
    fwrite($fp, $bined);
    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/bined.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.

Currently the best solution is the HTML5 boilerplate build script.

Beware that there is a learning curve before being able to use the plete 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 presses 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.

You could dynamically inject the appropriate js include depending on the URL. In essence, you check to see if it's the production URL, and if it is include the minified version. Then use an else branch to handle non-production URLs and inject the development version (this way someone can't see your staging URL).

本文标签： javascriptWorkflow with (non) minified jscss files for development and productionStack Overflow