Minimizar y ofuscar JavaScript desde el menú contextual del Explorador de Windows

17/07/2017
Artículo original

Antes de seguir leyendo, si no tienes claro qué es la minimización y ofuscación de código JavaScript, dale una lectura a este artículo que escribí en la web de campusMVP.

Si estás haciendo un desarrollo web Front-End medianamente grande, estarás usando con toda seguridad algún tipo de Task Runner para automatizar las principales tareas. Entre ellas, por supuesto, la generación de archivos para producción, lo cual incluye generar los archivos JavaScript minimizados y ( probablemente) ofuscados. De hecho, hoy en día es probable que estés usando Webpack con su plétora de loaders y plugins que te permiten hacer casi cualquier cosa.

Pero si estás programando algo más pequeño y rápido, muchas veces no te preocupas de usar Webpack, Gulp, o ni siquiera npm. Y que diablos: muchas veces tan solo te interesa poder pillar un archivo JavaScript cualquiera y poder minimizarlo. Sin más ceremonias.

Los editores más comunes tienen la opción de minimizar archivos de código, generalmente mediante algún tipo de plugin o extensión. Por ejemplo, Visual Studio Code (mi favorito) tiene Minify, Visual Studio usa Web Compiler, Atom tiene una plétora de plugins para hacer esto, y hasta Web Storm usa Uglify-JS por debajo.

Y es que el minimizador y ofuscador de JavaScript por antonomasia es sin duda Uglify-JS. Esta paquete npm toma un archivo .js y lo convierte en su versión minimizada, opcionalmente lo ofusca (modificador --mangle) y también puede generar archivos de mapa de código fuente (--source-map). Este es el que yo utilizo.

Usarlo desde la línea de comandos es muy sencillo, como veremos a continuación.

Usando Uglify-JS desde la línea de comandos

Para todo este tipo de herramientas es necesario instalar Node.js en nuestro equipo de desarrollo, que es lo que usan por debajo para ejecutarse. Y además usaremos npm para instalarlos.

Hoy en día es prácticamente indispensable disponer de Node.js instalado para hacer casi cualquier desarrollo web Front-End. Así que casi se puede dar por hecho que este entorno está instalado en la máquina de cualquier desarrollador actual.

Para instalar el paquete solo debemos abrir una línea de comandos y escribir:

npm install -g uglify-js

esto instalará la herramienta de manera global en nuestro equipo, para poder utilizarla desde cualquier sitio.

Ahora, para minimizar un archivo .js podemos escribir:

uglifyjs archivo.js --compress --source-map filename=archivo.min.js.map -o archivo.min.js

Esta línea de comandos lanza la ejecución del proceso e indica que se debe minimizar el archivo (--compress) generando uno nuevo con el nombre "archivo.min.js" (parámetro -o), y además generar el archivo de mapa de código fuente "archivo.min.js.map" (opción --source-map) para facilitar su depuración en producción si fuera necesario.

Si además queremos ofuscar el archivo resultante, cambiándole de nombre a las funciones privadas, variables locales, etc... de modo que se dificulte el seguimiento del código, podemos añadirle la opción --mangle, que sirve precisamente para eso:

uglifyjs archivo.js --compress --mangle --source-map filename=archivo.min.js.map -o archivo.min.js

Nota: es importante tener en cuenta que Uglify-JS solo es capaz de minimizar código ECMAScript 5, es decir, JavaScript "clásico". Si nuestro código incluye construcciones específicas de ECMAScript 2015 o posterior (ES6+), como funciones Lambda, clases, plantillas, iteradores, etc... su ejecución fallará. El motivo es que la herramienta parte de la base de que antes de pasar a producción el código ES6+, éste se va a transpilar a ES5 usando alguna herramienta como Babel. Así que tenlo en cuenta si se produce algún error.

Facilitando aún más su uso: menús contextuales en el explorador de Windows

Lo anterior, la verdad es que es muy sencillo, y no cuesta demasiado hacerlo de vez en cuando. Sin embargo no deja de ser tedioso tener que abrir una línea de comandos, acordarse de esa sintaxis y escribir la instrucción cada vez que queramos hacerlo.

Por eso, lo que yo uso es un menú contextual que me aparece directamente en el explorador de archivos de Windows cada vez que pulso con el botón secundario en un archivo con extensión .js:

Opciones en mi menú contextual

De hecho, para que no me moleste, lo tengo definido de modo que solamente me aparezcan estas opciones cuando pulso además la tecla de mayúsculas. De este modo no me estorban entre todas las opciones cuando solo quiero abrir el archivo en un editor y solo aparecen exactamente cuando los necesito: MAYÚSCULAS + Botón Derecho.

Para conseguirlo hay que tocar el registro del sistema. Para ello tenemos que abrir el programa editor de éste, regedit.exe, como administrador:

Abrir regedit como administrador

y situarnos en la rama HKEY_CLASSES_ROOT\JSFile\Shell\. Dentro de ésta debemos definir dos sub-nodos con el nombre que le queramos dar a los nuevos comandos, por ejemplo "Minimizar" y "Minimizar y Ofuscar". Dentro de éstos habrá a su vez un nuevo sub-nodo denominado "Command", que es el que contendrá el comando a ejecutar al pulsar en esa opción (uglifyjs en este caso):

Definición de un comando en el registro

El comando completo es:

cmd /c uglifyjs "%1" --compress --source-map filename="%1.min.js.map" -o "%1.min.js"

Para poder ejecutar uglifyjs, que solo funciona desde la línea de comandos, debemos llamarlo usando el ejecutable del sistema cmd.exe, que es el que lanza la línea de comandos con el comando que le pasemos a continuación. Este ejecutable tiene algunos modificadores, de los cuales nos interesan dos:

  • /k: este ejecuta el comando indicado y luego continúa la ejecución, es decir, nos deja la línea de comandos abierta. Esto solo nos interesará normalmente si necesitamos ver por pantalla el resultado de la ejecución, aunque siempre tenemos la opción de enviarla a un archivo si queremos usando el operador >.
  • /c: ejecuta el comando y termina la ejecución, por lo que ni siquiera veremos la línea de comandos al final. Este será el que utilicemos en este caso.

Además le pasamos el argumento %1, que en este contexto representa la ruta completa del archivo sobre el que hemos hecho clic con el botón secundario. Dado que no hay manera de obtener solo el nombre del archivo sin la extensión, en esta versión del comando lo que le indicamos es que genere un archivo con el mismo nombre y la extensión ".min.js" ("%1.min.js"), lo cual nos da un ".js" de más de lo habitual en el nombre. Así que si por ejemplo el archivo se llama miApp.js, obtendremos miApp.js.min.js. Y lo mismo ocurre con los mapas: miApp.js.min.js.map.

Tampoco es algo muy grave. Lo podemos dejar así o simplemente lo podemos editar (clic encima y F2 para renombrar) y quitarle el ".js" de más que tiene. Es un pequeño precio a pagar por la comodidad de usarlo de esta manera.

Para que solo aparezca cuando pulsamos la tecla de mayúsculas al mismo tiempo debemos editar el nodo "padre" y y añadirle una clave de texto vacía llamada Extended (así, como la "E" mayúscula):

Extended

Ahora repetimos lo mismo con el otro comando (simplemente añadiendo --mangle a la línea de comandos), y ¡listo para utilizar!:

Proceso de minimización y ofuscación

Para que no tengas que pasar el trabajo de meter a mano eso en el registro te lo doy ya hecho en un archivo .reg. Solo tienes que descargarlo, descomprimirlo y hacer doble-clic sobre el archivo .reg que contiene. Se meterán esas dos claves en el registro y podrás utilizarlo de la misma manera que has visto.

Solo unos recordatorios:

  • Debes tener instalado Node.js y el paquete uglify-js como hemos visto al principio.
  • Debes pulsar el botón derecho del ratón cuando saques el menú contextual o no aparecerán los comandos.
  • Puede que tarden un rato en aparecer o que tengas que cerrar todas las instancias del explorador de archivos antes de que parezcan.

¡Espero que te parezca útil!