开发和生产中使用（未）压缩的JS/CSS文件的工作流程

Question

我正在寻找一种方法来构建我的工作流程，以便在开发时使用“未压缩的”js/css文件并在生产中使用缩小后的文件而不会混淆或出现问题。

我不想有相同源代码的两个HTML版本（一个包含开发用的js/css文件，另一个包含缩小后的文件）。那么我需要这样做吗？

此外，最好的自动缩小过程的方式是什么？

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

- Aron Woost

---

这将是一个集成到您的服务器端部署方法中的工具。集成工具取决于您的服务器（PHP、.NET、Ruby等）。 - Raynos

我们使用Jawr。在开发中，我们将debug设置为true，在生产中我们将debug设置为false。当我们将debug设置为false时，脚本和其他资源将在客户端解压缩，因此您可以查看您的代码。 - user405398

在我的情况下，服务器端不是一种选择。 - Aron Woost

@AronWoost，你有没有找到适合自己的工作流程？我现在正在处理一个静态HTML + JS项目，将我的脚本转换作为构建步骤（虽然干净简单）很痛苦。我更喜欢直接编辑源代码，然后刷新浏览器--所以在开发期间，我将我的HTML指向“script/_src”，并在部署时将其调整为“script”。这很痛苦，我肯定有一天会错过某个步骤。 - groundh0g

@groundh0g，我刚回答了这个问题。 - Aron Woost

相关：https://dev59.com/H5jga4cB1Zd3GeqPN7Sv - WoJ

Answer 1

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

请注意，在能够使用完整功能之前需要一定的学习曲线。

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

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

HTML5 boilerplate build script非常棒。它是开源的，请贡献您的力量！

注意：我的大部分信息都是3个月以上的。如果有新的发展，请告诉我。

- Aron Woost

Answer 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/目录下，因此如果您要尝试，请确保该文件夹存在。

- Rich Bradshaw

Answer 3

您可以根据URL动态注入相应的js文件。实质上，您需要检查是否为生产URL，如果是，则包含经过压缩的版本。然后使用else分支来处理非生产URL并注入开发版本（这样其他人就无法看到您的分段URL）。

- onteria_