Bower y Grunt: Como automatizar las librerias del frontend

Share Button

BowerHace 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 agil. 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ía 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 estas 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 libreria y despues de la instalación se limpien los archivos de dependencias que no utilicemos. Magia negra!

Share Button
The following two tabs change content below.

cazaustre

Front End Developer at Chefly
Desarrollador Front-End y Diseñador Gráfico Freelance. Apasionado de la tecnología HTML5 y el mundo JavaScript. Geek, adicto a las series y a las camisetas.

Latest posts by cazaustre (see all)

  • Lucas

    Una pregunta, si no tengo la más mínima idea de JSON ni de NODE.JS ni me gasto en entender como usar Bower para mis proyectos no?

    • http://carlosazaustre.es/ Carlos Azaustre

      Hola @Lucas, gracias por comentar.
      Eso depende de si quieres aprender algo nuevo y que de alguna manera te agiliza el desarrollo o si te sientes más cómodo haciéndolo como lo haces hasta ahora.
      No es requisito tener mucho conocimiento de JSON y Node.js para utilizar Grunt y Bower y lo que te permite a la larga es ahorrar mucho tiempo.
      Yo te animo a que investigues y si no te resulta útil por lo menos lo has probado y has aprendido algo nuevo :)
      Un saludo!

      • hugotom

        Hola @carlosazaustre:disqus. una consulta. En cambio yo deseo aprender Grunt y Bower, pero de Node.js no se nada aun. A lo mucho Javascript básico y jQuery. Por donde puedo para empezar el camino de estos frameworks. Me facina la idea de poder automatizar tareas, minificar, compilar pre-procesadores, etc. Pero ¿por dónde puedo empezar?. ¿que opinas?

  • rusven

    Hola Carlos,

    Está muy bien encontrar info en español de estas tecnologías.

    Yo estoy probando Yeoman. Te lo recomiendo:

    http://yeoman.io/

    Un saludo.

    • http://carlosazaustre.es/ Carlos Azaustre

      Si, lo conozco!, de hecho tengo en NPM un generador para montar un proyecto MEAN, aunque está un poco verde: https://www.npmjs.org/package/generator-mean-redis

      • rusven

        YEAH!

        Estoy intentando integrar la segunda parte del tuto (Grunt-bower-task) con el generator de “yo webapp”, y estoy teniendo problemas.

        Básicamente me borra todo el directorio al ejecutar la acción grunt. No sé si noe stoy definiendo bien el directorio… No te aporto mucha info, pero any idea¿?

        ¡Gracias!

        • http://carlosazaustre.es/ Carlos Azaustre

          mmm no sabria decirte, Bower por defecto te descarga las librerias en el directorio /bower-components. Con la tarea de Grunt que pongo aquí los coloca en /public/vendor y borra el otro directorio…

  • Cristhian Duran

    Precioso, gracias grunt por existir

  • Cristhian Duran

    Hola Carlos Azaustre! Estoy trabado con algo medio loco que quiero hacer y vos capaz tenés la solución o ya te pasó

    Primero lo resumo así te das una idea: “Quiero una tarea de Grunt para convertir a base64 ALGUNAS imágenes de mi .css (Sólo las que yo quiera)”. Ya se que suena loco, pero dejame que te explique.

    Tengo un .css que genero con stylus, hasta ahí todo perfecto. Y luego tengo 2 tareas con las que estuve haciendo test para lograr lo que quiero:

    – grunt-encode-images: https://github.com/jreading/grunt-encode-images
    – grunt-image-embed: https://github.com/ehynds/grunt-image-embed

    Ambas (esto lo digo sin haberme metido a ver como realmente funcionan) recorren mi .css productivo en busca de alguna sintaxis similar a ” ulr(…) ” y cuando la encuentran, codifican a base64 lo que esté ahí adentro. PERFECTO!, ESO QUIERO, pero cual es el problema? Que yo en mi .css, por ejemplo, tengo:

    – Una fuente de íconos custom, que importo con font-face y que no quiero que se codifique en el .css
    – Una imágen de portada enorme y pesada. Que también deseo que no se codifique.

    – grunt-encode-images: convierte todo, sin discriminar nada, cosa que encuentra dentro de un ” url(…) ” el tipo lo codifica. No me sirve.

    – grunt-image-embed: este es un poquito más flexible. Si encuentra un ” /*ImageEmbed:skip*/ ” en la linea donde está la url lo esquiva. Pero este muchacho tiene otro problema, las extensiones de los íconos (.eot,.woff, etc.) no las reconoce como imágenes y no las esquiva, las codifica igual.

    [Espero que a esta altura no me quieras asesinar jajajajaja, soy un héroe mejorando.la buscando a otro héroe como tu jajaja]

    Así que mi pregunta es:
    – Conocés como podría lograr lo que quiero? Codificando sólo las lineas que yo quiero?
    – Capaz estoy muy loco en intentar hacer esto, si es imposible lo que pido, que me recomendarías hacer? El .css con TODAS las imágenes codificadas pesa más 1,5 mb (UNA ANIMALADA). Pero sin las imágenes en el .css tengo como 56 request al server que me gustaría evitar

    Lo dejo en tus manos, gracias por el espacio!

    Saludos desde Argentina (:
    Cristhian