Hace algunos meses escribí una entrada sobre Bower, un proyecto Open-Source salido de las tripas de Twitter que servía para descargar las librerías que empleamos en el frontend (jQuery, Bootstrap, Angular,…) de una manera ágil. El problema era que este proyecto nos bajaba todo el proyecto de github de cada una de las librerias que le indicábamos y nosotros solo queremos usar por ejemplo jquery.js y no toda su documentación, etc. En esta parte entra Grunt, el automatizador de tareas de JavaScript para limpiar la “barabunta” de archivos que se acumulan en nuestro proyecto. Vamos allá.

Lo primero de todo, necesitamos crear el archivo bower.json que funciona como package.json para nuestros proyectos en Node.js, donde le indicaremos las librerías que necesitamos, supongamos que queremos jquery y angular.js, el archivo bower.json tendrá este aspecto

{
    "name": "awesomeApp",
      "version": "0.0.1",
      "description": "An Awesome App",
    "dependencies": {
        "jquery": "latest",
        "angular": "latest",
    }
}

En la otra ocasión utilizamos un fichero llamado .bowerrc dónde se le indicaba el path donde queríamos que éstas dependencias se instalaran. En este caso vamos a prescindir de el y emplear una tarea de Grunt que utiliza el paquete: Grunt-bower-task que podemos encontrar en github y NPM que nos facilitará la vida. Incluimos esta dependencia en el package.json y la siguiente tarea en nuestro Gruntfile.js

bower: {
    install: {
        options: {
            targetDir: './public/vendor',
            layout: 'byComponent',
            install: true,
            verbose: true,
            cleanBowerDir: true
        }
    }
}

Este trozo de código y llamando a la tarea grunt bower, nos permite que las librerías se instalen en la carpeta public/vendor de nuestro proyecto, que solo se instalen los ficheros de la librería y después de la instalación se limpien los archivos de dependencias que no utilicemos. ¡Magia negra!




¿Te gusta lo que lees? Suscríbete!

Si quieres recibir en tu email antes que nadie las noticias que se cuecen en este blog, sólo tienes que dejar tu dirección de correo electrónico.



Author image
Carlos Azaustre
CTO & Co-Founder @ Chefly. Desarrollador Web y Diseñador Gráfico. Apasionado de la tecnología HTML5 y el mundo JavaScript. Geek, adicto a las series y a las camisetas.