개발 및 생산을 위해 (비) 축소 된 js/css 파일이 포함 된 워크 플로우

Question

"압축되지 않은"js/css 파일로 작업 할 때 혼란 스럽거나 문제가되지 않도록 작업 흐름을 구조화 할 방법을 찾고 있습니다. 생산을 위해 개발 및 축소.

같은 소스의 두 html 버전 (개발 용과 하나의 축소 된 js/css 파일)을 갖고 싶지 않습니다. 아니면해야합니까?

또한 실제 축소 프로세스를 자동화하는 가장 좋은 방법은 무엇입니까?

참고 : 로컬 솔루션을 찾고 있습니다. 서버 측은 옵션이 아닙니다.

Answer 1

현재 가장 좋은 해결책은 HTML5 boilerplate build script입니다.

완전한 힘을 사용할 수 있기 전에 학습 곡선이 있음에 유의하십시오.

또한 모든 페이지가 동일한 JavaScript 및 CSS 파일을 사용하는 웹 사이트에 최적화 된 빌드 스크립트를 언급 할 가치가 있습니다. 따라서 특정 페이지가있는 경우 추가 CSS 및 JavaScript 파일을 최적화/축소하려는 경우이 작업을 별도로 수행해야 할 수 있습니다.

또한 스크립트는 HTML을 압축하고 (선택적으로) PHP 항목을 그대로 둡니다.

HTML5 boilerplate build script은 최고입니다. 그것은 오픈 소스입니다, 기부하십시오!

참고 : 내 대부분의 정보는 3 개월 이상 된 것입니다. 새로운 발전에 대해 알려주십시오.

Answer 2

URL에 따라 적절한 js include를 동적으로 삽입 할 수 있습니다. 본질적으로, 프로덕션 URL인지 확인하고, 축소 된 버전이 포함되어 있는지 확인합니다. 그런 다음 else 브랜치를 사용하여 프로덕션 이외의 URL을 처리하고 개발 버전을 삽입하십시오 (이렇게하면 누군가가 준비 URL을 볼 수 없습니다). 내가 PHP에서 이것을 사용하고

Answer 3

- 당신은 영감을 사용할 수 있습니다 JSMin-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; 
} 

?> 

합니다.

은 그때 사용 : 내 페이지에서

<script src="/media/js/combined.php?libs=jquery-1.5.1.min|behaviour|jquery.form"></script> 

합니다.

캐시 된 압축 파일을/cache /에 저장하므로 사용하려는 경우 폴더가 있는지 확인하십시오.