[ASP.NET] Minificación de scripts con Web Essentials

Posted on Actualizado enn


Hola, este será un pequeño post en donde quiero mostrar como podemos generar nuestros archivos JavaScript más compactos, esto va a permitir que el nuevo archivo sea mas liviano y su descarga se más rápida, lo primero que debemos hacer es utilizando Nuget añadir Web Essentials:

image

Una vez instalada se tiene que reiniciar Visual Studio para que la herramienta quede disponible, ahora, para el ejemplo vamos a usar el siguiente archivo JavaScript (algo muy simple):

var operaciones = {
    Suma: function (a,b)
    {
        return a + b;
    },
    Resta: function (a,b)
    {
        return a - b;
    },
    Multiplicacion: function (a, b)
    {
        return a * b;
    },
    Division: function (a, b)
    {
        return a / b;
    }
};

Ese código lo he creado en un archivo con nombre Test.js, y sobre dicho archivo damos click derecho Web Essentials –> Minify JavaScript file(s), y se generan dos nuevos archivos, el primero Test.min.js y el segundo Test.min.js.map:

image

En el archivo .min.js se tiene el código JavaScript minificado, y en .min.js.map se tiene información sobre el archivo minificado, es importante que la minificación solo debe realizarse la primera vez, ya que si cambiamos el archivo normal, automáticamente vamos a tener esos cambios reflejados en el archivo .min.

Si observamos el archivo minificado:

var operaciones={Suma:function(n,t){return n+t},Resta:function(n,t){return n-t},Multiplicacion:function(n,t){return n*t},Division:function(n,t){return n/t}};
//@ sourceMappingURL=Test.min.js.map

Espero les haya gustado este pequeño post, que es más un tip de productividad.

3 comentarios sobre “[ASP.NET] Minificación de scripts con Web Essentials

    Sergio Daniel Lozano (@zheref) escribió:
    01/08/2013 en 10:50

    I love Web Essentials. Now it supports Typescript too

    […] [ASP.NET] Minificación de scripts con Web Essentials […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s