Cuando nos aventuramos en un proyecto web con más o menos visitas, queremos que sea lo más rápido para el usuario y para ello enviar la menor cantidad de información (si nuestro hosting nos cobra además por transferencia también ganamos por esto), para ello podemos comprimir la información (y ya lo soportan la mayoría de los navegadores).
Aunque tenemos que tener en cuenta que si comprimimos información (la compresión es un proceso algo pesado), estamos gastando recursos de CPU que, si lo pensamos, estar comprimiendo la misma información a cada petición que nos hagan de un fichero Javascript es tontería; por tanto, una vez que lo comprimamos, lo almacenamos en disco, que este tipo de información no ocupa tanto.
Por otra parte, si eres de los que realizan una plantilla más o menos completa y la publica con pequeñas modificaciones en diferentes webs, o incluso estar preparados para que un cliente nos cambie la gama de colores y no echarnos las manos a la cabeza; o por ejemplo cuando tenemos que tener en cuenta el mismo color tanto en el código CSS como en el Javascript, podemos escribir ciertas palabras clave dentro del fichero CSS y Javascript que nuestro script PHP traducirá antes de enviar la información al usuario final.
Para ello, y para poco más es el siguiente script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <? /* tcjs.php versión 0.05 Copyright 2010 Gaspar Fernández*/ /* Inclusión de keywords y compresión de archivos JS y CSS */ /* El código fuente se entrega tal cual, sin garantía para ser */ /* estudiado y utilizado en cualquier entorno libre y no libre. */ /* Eso si, agradecería que me comunicárais si lo usáis en un proyecto */ /* mandando un mail a blakeyed@totaki.com; sólo para saber que esto */ /* se está usando en algún lugar del mundo :) */ /* Configuración del script */ /* $basepath normalmente es la ruta donde se encuentra el script. Es la ruta base absoluta a partir de la cual se encuentran todos los archivos. Esta ruta será padre de la ruta donde se encuentre el fichero CSS o JS que llamaremos. */ $basepath = '/home/gaspy/proyectos/www/poesiabinaria/tests/'; /* $httppath es la URL base de nuestra web o sección, normalmente será la dirección con la que abriremos el directorio web correspondiente a $basepath. */ $httppath = 'http://localhost/poesiabinaria/tests/'; /* $cachedir es el directorio donde se encontrarán los cachés de los ficheros JS y CSS */ $cachedir = $basepath.'var/gzcache/'; /* $excluded_files es un archivo de texto donde se encuentran (uno por línea) todos los ficheros que no pasarán por el procesador. Sólo serán comprimidos y guardados en caché. */ $excluded_files = $basepath.'var/excluded'; /* $definiciones_file es un archivo php que incluiremos cargando las definiciones necesarias para completar el contenido de los CSS y JS. Puede haber un fichero de definiciones tanto raiz como en el directorio donde se encuentra el CSS o JS a procesar.*/ $definiciones_file = 'lib/tcjc_defs.php'; /* FIN de Configuración del script */ function gf_getgz_cachefile($file) { /* Obtenemos un nombre de fichero único para los archivos de cache */ global $cachedir; $getstr = $file.sizeof($file).filemtime($file); $hash = base_convert(md5($getstr),16,36); /* Hash en base36 */ return $cachedir.$hash; } function add_ending_slash($path) { /* Añade una barra al final de la ruta del directorio */ $sep = (PHP_OS == 'Windows')? '\':'/'; $path .= (substr($path,-1) == $sep)? '':$sep; return $path; } function genera_y_cachea($file, $cachefile) { /* Genera el cache, sustituyendo las definiciones */ global $basepath, $definiciones_file, $httppath; $definiciones = array ('%%http_path%%' => $httppath); /* Si tenemos un archivo auxiliar para incluir definiciones */ if (file_exists($basepath.$definiciones_file)) require_once($basepath.$definiciones_file); $local_defs = add_ending_slash(dirname($file)).$definiciones_file; if (file_exists($local_defs)) require_once($local_defs); $triggers = array_keys($definiciones); $reemplaz = array_values($definiciones); $contenidos = file_get_contents($file); $contenidos = str_replace($triggers, $reemplaz, $contenidos); file_put_contents($cachefile, $contenidos); $gz = gzopen($cachefile.".gz","wb5"); gzwrite($gz, $contenidos); gzclose($gz); } function comprime($file, $cachefile) { /* Símplemente comprime el archivo */ $contenidos = file_get_contents($file); file_put_contents($cachefile, $contenidos); /* Hacemos un backup también */ $gz = fopen($cachefile.".gz","wb"); fwrite($gz, gzencode($contenidos)); fclose($gz); } function interpretar($file) { /* Mira el archivo de excluidos y si no debo interpretarlo, devuelve false */ global $excluded_files; if (file_exists($excluded_files)) { $excl = file ($excluded_files); return (!in_array($file, $excl)); /* Si la encontramos, devolvemos FALSE */ } return true; } $type = (isset($_GET['type']))?$_GET['type']:false; $file = (isset($_GET['file']))?$_GET['file']:false; // Nos aseguramos de que las dos esté especificadas if (($type) && ($file)) { /* Establecemos las cabeceras http necesarias */ switch ($type) { case 'css': header("Content-type: text/css; charset=utf-8"); break; case 'js' : header("Content-type: text/javascript; charset=utf-8"); break; } header("Cache-Control: must-revalidate"); if (file_exists($basepath.$file)) { $origftm = filemtime($basepath.$file); $cachefile = gf_getgz_cachefile($basepath.$file); /* Genera un nombre de archivo de caché único */ @$destftm = filemtime($cachefile); /* No daremos error si no existe el archivo */ if ($origftm>$destftm) { /* Si el fichero original es más nuevo que su caché, lo procesamos todo de nuevo */ if (interpretar($file)) genera_y_cachea($basepath.$file, $cachefile); else comprime ($basepath.$file, $cachefile); } if ( (isset($_SERVER['HTTP_ACCEPT_ENCODING'])) && (strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))) { header("Content-Encoding: gzip"); header("Content-Length: ".filesize($cachefile.".gz")); readfile ($cachefile.".gz"); /* Si el navegador permite contenidos gzipeados... */ } else readfile ($cachefile); } /* else ERROR no existe el fichero CSS o JS */ } /* else ERROR, no se ha especificado tipo de fichero o el fichero */ ?> |
También puedes descargarlo directamente: aquí: tcjs.php.gz (2.2Kb)
Lo que pretendo es que con este script sólo tengamos que copiar el archivo, definir un par de cosas y funcionar, y que sea totalmente transparente, tanto que nos olvidemos de que lo estamos usando.
Para instalarlo, podemos copiarlo en el directorio raiz de nuestro servidor, el ejemplo que muestro es para Apache (y es necesario tener mod-rewrite), y crear un archivo .htaccess que contenga lo siguiente:
1 2 3 4 | RewriteEngine On RewriteBase / RewriteRule ^(.*\.css) tcjs.php?type=css&file=$1 RewriteRule ^(.*\.js) tcjs.php?type=js&file=$1 |
También tenemos que prestar atención a las primeras líneas de código del script tcjs.php:
- $base_directory será el directorio raiz de todos los css, js, definiciones y caches (no es estrictamente necesario que sea de estos últimos). Es decir, si nuestra web está en /home/www/public_http/ no debemos llamar a nada que esté en un nivel inferior (podrán estar dentro de subdirectorios pero a partir de este punto); es más, los CSS y JS estarán por ejemplo en /home/www/public_http/js; en este caso $base_directory=’/home/www/public_http/
- $httppath será la dirección web de menor nivel que vayamos a llamar; por ejemplo: http://www.midominio.com/
- $cachedir será el lugar donde creemos los ficheros de caché, este directorio tiene que tener permisos para que el servidor web pueda escribir en él.
- $excluded_files será el nombre de un archivo cuyo contenido serán todos los ficheros que no queramos que sean procesados, sólo serán comprimidos. Por ejemplo, si el fichero es /home/www/public_http/js/nieve.js y nuestro $base_directory es /home/www/public_http/, el texto que deberíamos incluir en el archivo será js/nieve.js
- $definiciones_file es la ruta relativa a un archivo PHP que se cargará cuando vayamos a generar un CSS o JS. Puede haber dos tipos de archivo de definiciones, el global, situado en $base_directory.$definiciones_file y el local situado en (el mismo directorio que el archivo CSS a procesar).$definiciones_file. Por ejemplo:
- $base_directory=’/home/www/public_http/’
- El fichero JS que cargamos estará en /home/www/public_http/js/mijavascript.js
- $definiciones_file=’defs/definiciones.php
- tcjs.php cargará dos ficheros de definiciones situados en /home/www/public_http/defs/definiciones.php y en /home/www/public_http/js/defs/definiciones.php
El fichero de definiciones (que ya hemos visto donde está contendrá un array llamado $definiciones, pero no lo crearemos de nuevo, sino que lo continuaremos, por ejemplo:
1 2 3 4 | ... $definiciones['color_base'] = '0ff00f'; $definiciones['ruta_static'] = 'http://estaticos.miservidor.com/'; $definiciones['visibilidad_mensajes'] = ($debug)?'visible':'hidden'; |
Podemos utilizarlo por ejemplo para definir un color de objeto desde PHP y que el CSS lo incluya (puede que debamos usarlo desde PHP también, por ejemplo para generar una imagen con ese color de fondo); para una ruta de ficheros estáticos en un servidor (normalmente en mi servidor local será otra ruta), para mostrar directamente una capa que está oculta mientras estamos programando algunas opciones en Javascript, y para muchas cosas más.
Foto principal: Alex Hockett
Pingback: Bitacoras.com /
Pingback: Poesía binaria » Cuando Facebook hace de las suyas [ BUG CSS ] /
Hello, I read this nice article. I think You put a best effort to write this perfect article. I appreciate your work. thank you so much.
It’s a game. Five dollars is free. Try it It’s not an easy game ->-> 토토사이트.com