Archivos mensuales: Octubre 2016

Yeoman, Angular, ng-table y html-minifier

Últimamente cada vez que tengo que hacer un aplicación web suelo implementarla usando Angular. Para construir la estructura y automatizar tareas me apoyo en Yeoman, que es una herramienta muy útil para el desarrollo web.

El tema es que estaba yo con mi proyecto en angular, usando ng-table, un módulo que permite de manera sencilla usar tablas con filtros, ordenación, paginación, etc.

Todo funcionaba muy bien hasta que he hecho un grunt build del proyecto y al subir la versión de distribución del mismo no me funcionaba la parte de ordenación de tablas.

Al hacer un grunt build, yeoman, crea una versión minimizada y comprimida tanto de los css, como los js y el html del proyecto. He pensando que en alguna parte del proceso algo estaba mal y me dejaba sin esa funcionalidad.

Después de ver que no era por algo que había hecho yo mal, he revisado qué es lo que hace la tarea build dentro del fichero Gruntfile.js. He visto que todas las vistas del proyecto se convertían a javascript y se usaba $templateCache para las mismas.

En un primer intento, he comentado la subtarea que se encargaba de convertir las vistas en HTML a javascript y he visto que todo funcionaba bien, por tanto el problema está en cómo se hace la conversión.

He visto que primero se minimiza el HTML con html-minifier y analizando el resultado he visto que ese HTML minimizado perdía la parte del código HTML que indicaba al módulo ng-table la ordenación de las columnas.

Me he instalado el html-minifier para usarlo en el Terminal y he visto que opciones usaba la tarea de grunt, concretamente eran las siguientes:

 options: {
          collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true
        }

He ido probando una por una las opciones, pero en su versión de Terminal para ver qué salida producían:

html-minifier --collapse-whitespace --conservative-collapse  --collapse-boolean-attributes  main.html 

Y cuando he llegado a la opción de collapseBooleanAttributes, he visto que esa era la opción que transformaba la plantilla y que hacía que dejara de funcionar la ordenación. Concretamente:

<td sortable="'valor'">  => <td sortable>

Por lo que comentando collapseBooleanAttributes: true en el fichero Gruntfile.js he conseguido que funcionara perfectamente la versión de distribución del proyecto.