Archivo de la etiqueta: Minificar

Programación,Software,Web

Usando Grunt para «minificar» archivos JSON

Deja un comentario

Anteriormente escribí sobre el uso de Grunt para convertir archivos LESS a CSS, lo pueden ver aquí.

Ahora vamos a usar Grunt para «minificar» archivos en formato JSON.

Minificar consiste en reducir el tamaño de un archivo, esto se logra quitando los espacios en blanco, saltos de línea y comentarios. Con este método se puede lograr reducir los archivos JSON hasta en 50% de su tamaño original. Tu millaje puede variar.

grunt-js

¿Qué es Grunt?

Es un ejecutador de tareas en JavaScript, facilitando la automatización de tareas. Las tareas repetitivas que uno realiza pueden ser fácilmente automatizadas con Grunt. Lo más resaltante es la cantidad de «plugins» que existen para Grunt.

Con Grunt puedes minificar, compilar, comprimir, hacer pruebas unitarias, «lint» (consiste en chequear el código para encontrar errores o bugs, hace un análisis estático), optimizar imágenes, etc.

grunt-minify

Usando grunt-json-minify.

Vamos a usar el plug-in grunt-json-minify para «minificar» los archivos JSON.

Lo puedes encontrar aquí.

La documentación dice que hay que agregar esta línea a tu archivo grunt:

grunt.loadNpmTasks('grunt-json-minify');

Y también un ejemplo:

'json-minify': {
 build: {
     files: 'build/**/*.json'
    }
 }

Como usar el plug-in para minificar archivos.

Primero tienes que tener node.js instalado en tu computadora. Lo tienes que descargar de aquí: http://nodejs.org/

Una vez instalado abre una ventana de comandos (command prompt) o ejecuta cmd y ubícate en el directorio:

c:\Program Files\nodejs

o

c:\Program Files (x86\nodejs

Tienes que ejecutar las variables de entorno;

nodevars.bat

Ahora ya puedes ejecutar npm para instalar Grunt.

npm install -g grunt-cli

Eso instalará la utilidad de línea de comando de Grunt globalmente en tu sistema.

En tu proyecto local tienes que instalar Grunt así:

npm install grunt --save-dev

Cuando le agregas –save-dev al comando le agrega el plugin como una dependencia en el archivo «package.json» (si tienes uno).

Ahora ya puedes instalar el plugin:

npm install grunt-json-minify

Crea un archivo y ponle de nombre gruntfile.js y ponle el siguiente contenido:

module.exports = function (grunt) {
    // grunt config
    grunt.initConfig({
        'json-minify': {
            build: {
                files: 'build/**/*.json/'
            }
        }
    });

    // load minify
    grunt.loadNpmTasks('grunt-json-minify');
};

Edita la parte que dice files: por la ruta correcta por ejemplo si los archivos que quieres minificar están en una carpeta en la raíz llamada «MiCarpeta» tienes que poner esto: /MiCarpeta/*.json/

Luego de guardarlo lo puedes ejecutar así:

grunt json-minify:build

Muestra una salida parecida a la siguiente:

File "c:/MiCarpeta/mi-archivo.json":
 >> 8.317 KiB - 45% = 4.578 KiB
Total compressed: 1 file
 >> 8.317 Kib - 45% = 4.578 KiB
Done, without errors.

Si cuando lo ejecutas dice Grunt: Command not found tienes que instalar la interfaz de línea de comando:

npm install -g grunt-cli

Si muestra el error: Unable to find local grunt, reinstala grunt localmente:

npm install grunt --save-dev

Ten en cuenta que la ruta que especifiques en «files:», todos los archivos json que especifiques serán minificados en esa misma carpeta. Por eso recuerda sacar una copia de los archivos antes de minificarlos.

Si lo que quieres es minificar archivos JavaScript puedes usar el popular plugin: UglifyJS.