用于开发和生产的（非）缩小 js/css 文件的工作流程答案

【问题标题】：Workflow with (non-) minified js/css files for development and production用于开发和生产的（非）缩小 js/css 文件的工作流程
【发布时间】：2011-08-24 07:49:29
【问题描述】：

我正在寻找一种方法来构建我的工作流程，以便在使用“未压缩”的 js/css 文件进行开发和使用压缩文件进行生产时不会感到困惑/陷入麻烦。

我不想拥有同一个源的两个 html 版本（一个用于开发，一个用于缩小 js/css 文件）。还是我必须这样做？

还有什么是自动化实际缩小过程的最佳方法？

注意：我正在寻找本地解决方案。服务器端不是一个选项。

【问题讨论】：

这将是一个构建到您的服务器端部署方法中的工具。集成工具取决于您的服务器（PHP、.NET、ruby 等）
我们使用jawr。在开发中，我们将 debug 设置为 true，而在生产中，我们将 debug 设置为 false。当我们将debug设置为false时，脚本和其他资源会在客户端解压，这样你就可以看到你的代码了。
在我的情况下，服务器端不是一个选项。
@AronWoost 你有没有想出适合你的工作流程？我现在正在处理一个静态 HTML + JS 项目，并且将我的脚本转换作为构建步骤（虽然干净简单）是一种痛苦。我更喜欢只编辑源代码，然后刷新浏览器——所以我在开发期间将我的 html 指向“script/_src”，并在部署时将其调整为“脚本”。这很痛苦，我敢肯定我会错过这些天的第一步。
@groundh0g 我刚刚回答了这个问题。

标签： javascript html css workflow

【解决方案1】：

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

请注意，在能够使用完整功能之前有一个学习曲线。

另外值得一提的是，构建脚本针对网站进行了优化，每个页面都使用相同的 JavaScript 和 CSS 文件。因此，如果您有某些页面，其中包含您想要优化/缩小的其他 CSS 和 JavaScript 文件，您可能需要单独执行此操作。

该脚本还可以压缩 HTML，并且（可选）保持 PHP 内容不变。

HTML5 boilerplate build script 太棒了。它是开源的，请贡献！

注意：我的大部分信息都是 3 个月以上的。让我知道新的发展。

【讨论】：

【解决方案2】：

我一直在 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/ 中，因此如果您尝试这样做，请确保该文件夹存在。

【讨论】：

【解决方案3】：

您可以根据 URL 动态注入适当的 js 包含。本质上，您检查它是否是生产 URL，以及它是否包含缩小版本。然后使用 else 分支来处理非生产 URL 并注入开发版本（这样别人就看不到你的暂存 URL）。

【讨论】：