帶有（非）縮小的js/css文件的開發和生產工作流程

我正在尋找一種方法來構建我的工作流程，以便在處理「未壓縮」的js/css文件時不會感到困惑/陷入困境開發和縮小的生產。帶有（非）縮小的js/css文件的開發和生產工作流程

我不想有兩個html版本（一個用開發，另一個用縮小的js/css文件）。或者我必須？

什麼是自動執行實際最小化過程的最佳方法？

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

來源

2011-05-12 Aron Woost

這將成爲您的服務器端部署方法的一種工具。集成工具取決於你的服務器（PHP，.NET，紅寶石等） – Raynos 2011-05-12 17:36:34

我們使用jawr。在開發中，我們將調試設置爲true，並在生產中將調試設置爲false。當我們將debug設置爲false時，腳本和其他資源將在客戶端解壓縮，以便您可以看到您的代碼。 – 2011-05-12 17:38:47

在我的情況下，服務器端不是一個選項。 – 2011-05-12 17:41:09

目前最好的解決方案是HTML5 boilerplate build script。

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

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

該腳本還壓縮HTML和（可選）保持PHP的東西不變。

HTML5 boilerplate build script太棒了。它是開源的，請捐助！

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

來源

2011-11-25 09:52:08

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

來源

2011-05-12 17:45:51

我一直在使用這種在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 /中，因此如果您正在嘗試此操作，請確保該文件夾存在。

來源

2011-05-12 20:05:20

帶有（非）縮小的js/css文件的開發和生產工作流程

回答

相關問題