Tag Archives: Grunt

Use uncss, rid of unnecessary css and tips

Javascript

Hi, other thing to share about my experience. This time, I talk about a plugin uncss to delete all css unused in own project.

For use that, you have a extension plugin for the commons task runners like gulp (gulp-uncss) and grunt (grunt-uncss). To write examples, I will use gulp!.

The code is simple, only are some lines into a task:

You can see that before to use uncss, if you use sass, you should to compile sass before to apply uncss. This plugin only find css tags into html files, but, there are a good practice (learned thanks to my friend Frank Parejo) that is add a naming “js-…) to all css that is executed or created into any javascript files, and into param “ignore” add all css with “js-…” to avoid to remove it. Get a look to uncss to learn more about.

This practice is very recommended. Always I use bootstrap to build my web projects, because is opensource, has a big support by twitter team and is very simple to learn, and you can down about 75% the weight of your css files when you are using a css framework like bootstrap/fundation.

For webpack, there are a famous solution called PurifyCss that also you can use with gulp and grunt

tags: , , , , , ,

Documentar nuestros proyectos AngularJS con NgDocs

AngularJS, Documentación, Javascript

Si estas trabajando en un proyecto AngularJS, supongo que te habrás topado con la idea de como documentar todo esto de forma automática al mas puro estilo JavaDoc o PHPDoc. Pues es lo que me preguntaba esta semana. Pues buscando, una alternativa sencilla a implementar ha sido NgDocs. NgDocs es un plugin para Grunt o Gulp que nos permite automatizar la generación de documentación mediante una tarea.

Yo tan solo voy a explicar como implementarla para Grunt aunque luego dejaré enlaces tanto para Gulp como para Grunt.

La instalación es muy sencilla:
npm install grunt-ngdocs --save-dev

Una vez hayamos instalado esto, hacemos los siguientes pasos:

Cargamos el plugin en nuestro Gruntfile.js: grunt.loadNpmTasks('grunt-ngdocs');

Y ahora, creamos la tarea:
ngdocs: {
   all: ['src/**/*.js']
}

Registramos la tarea:
grunt.registerTask( 'ngdocs' );

Ahora, para que NgDocs nos sepa describir para que es cada controlador, directiva y demás, deberemos escribir unos comentarios previos al código:

Ahora, ya podríamos lanzar un grunt ngdocs y nos tomará la información de todos los archivos .JS de nuestro proyecto donde tengamos estos comentarios y nos generará un directorio “docs” donde si vamos a http://localhost:port/docs podremos ver una documentación.

La vista que nos presentará es muy parecida a la de AngularJS. Podemos hacer pequeños ejemplos prácticos y también tiene un buscador lateral para hacer la búsqueda entre los apartados.

Para mas información, os dejo los enlaces del plugin en npm:
Grunt: https://www.npmjs.com/package/grunt-ngdocs
Gulp: https://www.npmjs.com/package/gulp-ngdocs

En ambos plugins tenéis un repositorio con un ejemplo e ir haciendo pruebas. En la misma documentación del paquete de npm, invitan a que miremos un artículo de como documentar proyectos en AngularJS https://github.com/angular/angular.js/wiki/Writing-AngularJS-Documentation.

En una próxima edición mostraré como poder documentar métodos y demás apartados que puedan ser útiles.

Nota:
Existe un proyecto, generador de documentación llamado Dgine, que es un tanto mas complejo de configurar y que aún no he probado, pero es un paquete de npm desarrollado por el equipo de AngularJS.

Cuando lo tenga probado compartiré como configurarlo en nuestros proyectos AngularJS y ejemplos.

tags: , , , , ,