使用（非）縮小的js / css文件進行開發和生產的工作流程

Question

我正在尋找一種方法來構建我的工作流程，因此在使用“未壓縮”的js / css文件進行開發和縮小生產時，我不會感到困惑/陷入困境。

我不希望有兩個相同來源的html版本（一個帶有開發版，另一個帶有縮小的js / css文件）。 或者我必須這樣做？

還有什么是自動化實際縮小過程的最佳方法？

注意：我正在尋找本地解決方案。 服務器端不是一個選項。

Answer 1

我一直在PHP中使用它 - 你可能會用它來獲取靈感：

<?
$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;
}

?>

與JSMin-php一起。

然后我用：

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

在我的頁面中。

它將緩存的縮小文件存儲在/ cache /，因此如果您嘗試此操作，請確保該文件夾存在。

Answer 2

目前最好的解決方案是HTML5樣板構建腳本 。

請注意，在能夠使用完整的電源之前有一個學習曲線。

另外值得一提的是，針對網站優化的構建腳本，其中每個頁面都使用相同的JavaScript和CSS文件。 因此，如果您有某些頁面，其中包含您希望優化/縮小的其他CSS和JavaScript文件，則可能需要單獨執行此操作。

該腳本還壓縮HTML並（可選）保持PHP內容不變。

HTML5樣板構建腳本非常棒。 它的開源，請貢獻！

注意：我的大多數信息都是3個月以上。 讓我知道新的發展。

Answer 3

您可以根據URL動態注入相應的js include。 實質上，您檢查它是否是生產URL，以及它是否包含縮小版本。 然后使用else分支處理非生產URL並注入開發版本（這樣有人無法看到您的登台URL）。