Рабочий процесс с (не) минимизированными файлами 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

Вы можете динамически вводить соответствующие JS-включения в зависимости от URL. По сути, вы проверяете, является ли это рабочий URL-адрес, и включает ли он минимизированную версию. Затем используйте ветку else для обработки непроизводственных URL-адресов и введите версию разработки (таким образом, кто-то не сможет увидеть ваш промежуточный URL).