Compresor JS y CSS

Uno de los puntos claves a la hora de realizar un desarrollo web es la optimización del mismo y dos de los mecanismos de conseguirlo es mediante la reducción de peticiones HTTP y mediante la reducción del tamaño de los ficheros.

En el caso de las hojas de estilo o los ficheros javascript es posible y común manejar numerosos ficheros de cara a tener mejor orgaizado el código, pero a la hora de llevarlo al entorno real de producción el unificar estos ficheros para reducir las peticiones HTTP.

Para reducir su tamaño se hace uso de la llamada ofuscación mediante la cual reducimos el peso de los mismos. Si combinamos ambas técnicas conseguiremos grandes mejoras a la hora de optimizar sitios web.

Para automatizar este mecanismo nace este pequeño programa mediante el cual cada vez que se compile el proyecto se unifican y ofuscan las hojas de estilo y los ficheros javascript.

El programa se apoya en CSSTidy para las hojas de estilo y en JSMin para los ficheros JavaScript.

Configuración del proyecto web

Lo primero será descromprimir el programa en la raiz del sitio web de manera que exista la carpeta «Post-Build» en la raiz de la web con los scripts y ficheros de configuración dentro.

Una vez echo esto iremos a las propiedades del proyecto y configuraremos que tras la compilación lance el siguiente comando (con las comillas dobles incluidas).

"$(ProjectDir)Post-BuildCompresorJSyCSS.exe" "$(ProjectDir)Post-Build"

Para configurar los ficheros que se comprimirán y en que ficheros resultantes existen dos ficheros XML de configuración que podemos encontrar dentro de la carpeta «Post-Build».

<?xml version="1.0" encoding="utf-8" ?>
<Compressions csstydyPath="Post-Buildcsstidy.exe">
    <Compression target="cssall_1.css">
        <File>cssfile1.css</File>
        <File>cssfile2.css</File>
    </Compression>
    ...
    ...
    <Compression target="cssall_N.css">
        <File>cssfileN.css</File>
        <File>cssfileM.css</File>
    </Compression>
</Compressions>
<?xml version="1.0" encoding="utf-8" ?>
<Compressions jstydyPath="Post-Buildjsmin.exe">
    <Compression target="jsall_1.js">
        <File>jsfile1.js</File>
        <File>jsfile2.js</File>
    </Compression>
    ...
    ...
    <Compression target="jsall_N.js">
        <File>jsfileN.js</File>
        <File>jsfileM.js</File>
    </Compression>
</Compressions>

Como se puede ver siguen una estructura muy similar. En cada uno de ellos se irán haciendo uno o varios grupos de ficheros en los que se indicará el fichero unión o resultante (atributo target) y cada uno de los ficheros que lo compondrán (cada elemento File).

Es importante destacar que los ficheros CSS tendrán que estar codificados en ANSI ya que sino el CSSTidy puede dar problemas.

Como último paso nos quedará el configurar nuestra página para que cargue los ficheros resultantes.

<link href="/css/all_1.css" rel="stylesheet" type="text/css" />

<script src="/js/all_1.js" type="text/javascript"></script>

* Si los ficheros (target) están marcados como solo lectura (como pasa al protegerlos con SourceSafe) no se podrán modificar y no funcionará bien el programa.

3 comentarios en “Compresor JS y CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.