JS and CSS Compressor

One of the key points when doing web development is the optimization of himself and two mechanisms to achieve this is by reducing HTTP requests and by reducing the file size.

For style sheets or javascript files is possible and common side handle many files have better orgaizado the code, but at the time of taking the actual production environment to unify these files to reduce HTTP requests.

To reduce the size of the call uses obfuscation by which we reduce the weight thereof. If we combine both techniques to get big improvements when optimizing websites.

To automate this mechanism comes this little program where every time you compile the project and obfuscate unified style sheets and javascript files.

The program supports CSSTidy for style sheets and JavaScript files JSMin

Web Project Settings

The first will descromprimir the program in the root web site folder so that there is «Post-Build» in the root of the site with the scripts and configuration files inside.

Once done this will go to project properties and configure it after compilation launch the following command (with the double quotes included).

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

To configure the files to be compressed and that there are two files resulting XML configuration files that can be found inside the folder «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>

As can be seen following a similar structure. In each of them will make one or more groups of files in the file stating the union or consequential (target attribute) and each of the files that make up (each element File).

Importantly, CSS files will be encoded as ANSI CSSTidy but can cause problems.

As a last step will be to configure our site to load the resulting files.

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

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

* If the files (target) are marked as read only (as passed to protect them with SourceSafe) can not be modified and the program will not work properly.

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.