Рабочий процесс с (не) мини файлами js/css для разработки и производства

Я ищу способ структурирования своего рабочего процесса, поэтому я не запутаюсь/не сработал при работе с "несжатыми" файлами js/css для разработки и минификсации для создания.

Я не хочу иметь две версии html (один с разработкой и один с мини файлами js/css) того же источника. Или мне нужно?

И как лучше всего автоматизировать процесс фактического минимизации?

ПРИМЕЧАНИЕ. Я ищу локальное решение. Серверная сторона не является вариантом.

Ответ 1

В настоящее время лучшим решением является HTML5 шаблонная конструкция script.

Остерегайтесь того, что есть кривая обучения, прежде чем сможете использовать полную мощность.

Также стоит упомянуть, что сборка script оптимизирована для сайтов, где каждая страница использует одни и те же файлы JavaScript и CSS. Поэтому, если у вас есть определенные страницы, у которых есть дополнительные файлы CSS и JavaScript, которые вы хотите оптимизировать/минимизировать, вам может понадобиться сделать это отдельно.

script также сжимает HTML и (необязательно) оставляет ненужным PHP файл.

HTML5 шаблонная конструкция 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

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