繁体   English   中英

使用(非)缩小的js / css文件进行开发和生产的工作流程

[英]Workflow with (non-) minified js/css files for development and production

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

我不希望有两个相同来源的html版本(一个带有开发版,另一个带有缩小的js / css文件)。 或者我必须这样做?

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

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

我一直在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 /,因此如果您尝试此操作,请确保该文件夹存在。

目前最好的解决方案是HTML5样板构建脚本

请注意,在能够使用完整的电源之前有一个学习曲线。

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

该脚本还压缩HTML并(可选)保持PHP内容不变。

HTML5样板构建脚本非常棒。 它的开源,请贡献!

注意:我的大多数信息都是3个月以上。 让我知道新的发展。

您可以根据URL动态注入相应的js include。 实质上,您检查它是否是生产URL,以及它是否包含缩小版本。 然后使用else分支处理非生产URL并注入开发版本(这样有人无法看到您的登台URL)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM