Flujo de trabajo con archivos js/css (no minificados) para desarrollo y producción

Question

Estoy buscando una forma de estructurar mi flujo de trabajo para no confundirme/meterme en problemas cuando trabajo con archivos js/css "sin comprimir" desarrollo y minificados para producción.

No quiero tener dos versiones html (una con desarrollo y una con archivos mins js/css) de la misma fuente. ¿O tengo que hacerlo?

¿Cuál es la mejor manera de automatizar el proceso de minify real?

NOTA: Estoy buscando una solución local. El lado del servidor no es una opción.

Answer 1

Actualmente la mejor solución es HTML5 boilerplate build script.

Tenga en cuenta que hay una curva de aprendizaje antes de poder utilizar la potencia completa.

También vale la pena mencionar que el script de compilación optimizado para sitios web, donde cada página utiliza los mismos archivos CSS y JavaScript. Entonces, si tiene ciertas páginas, que tienen archivos CSS y JavaScript adicionales que desea optimizar/minificar, es posible que deba hacer esto por separado.

La secuencia de comandos también comprime HTML y (opcionalmente) deja intacto lo de PHP.

HTML5 boilerplate build script es increíble. Es de código abierto, por favor contribuye!

Nota: La mayoría de mis informaciones tienen más de 3 meses. Déjame saber sobre nuevos desarrollos.

Answer 2

Puede inyectar dinámicamente los js apropiados incluidos según la URL. En esencia, verifica si es la URL de producción y si incluye la versión minificada. A continuación, utilice una rama else para gestionar URL que no sean de producción e inyecte la versión de desarrollo (de esta forma, alguien no puede ver su URL de transferencia).

Answer 3

He estado usando esto en PHP - es posible utilizarlo para la inspiración:

<? 
$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; 
} 

?> 

junto JSMin-php.

Luego uso:

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

en mis páginas.

Almacena el archivo minimizado en caché en/cache /, así que asegúrese de que esa carpeta exista si está intentando esto.