Automatización de tareas para proyectos en Front-End

7/Abr/2014 246

GruntJS es la herramienta de automatización de tareas escrita en JavaScript que más crece actualmente. Es robusta y está activamente siendo mejorada, y sólo requiere NodeJS para funcionar. Su fortaleza está en crear rutinas automatizadas para procesos repetitivos, como por ejemplo: compilar un archivo LESS/SCSS/HAML/Handlebars/Liquid, minificar archivos .css y .js, concatenar librerías .js, comprimir imágenes, recargar el browser cada vez que hayan nuevos cambios entre muchos otros que se te puedan ocurrir.

En esta ocasión mostraré un sencillo flujo que pueden utilizar para proyectos front-end; es un buen comienzo para quienes no están familiarizados aún con su utilidad y el uso cotidiano del Terminal/Consola.

Primero, debes tener lo fundamental para funcionar:

  • NodeJS (descargar e instalar)
  • LiveReload (extensión de Chrome y otros navegadores)
  • Grunt command line interface (CLI): se instala através del comando de terminal:
    $ sudo npm install -g grunt-cli

Descargar desde GitHub

package.json

Es el archivo que contiene los nombres de las librerías que utilizaremos para automatizar nuestras tareas recurrentes y que reside en la raíz del proyecto. Aquí están el nombre y la versión de cada plugin que necesitaremos, de una larga lista de plugins existentes.

Gruntfile.js

Es el archivo base con el cual crearemos las tareas que necesitamos corra GruntJS por nosotros y que reside en la raíz del proyecto junto a package.json. En este archivo están definidas los plugins que utilizaremos y cómo deben trabajar, en esta ocasión incluyo los siguientes:

  • uglify minifica archivos JavaScript
  • imagemin comprime imágenes
  • less compila y minifica archivos .less
  • watch corre tareas definidas cada vez que se realizan cambios a ellas, en este caso todas las anteriores.
  • ftp-deploy realiza subida de los archivos que indiques a un servidor definido a través de FTP.

Uso

El directorio base se llama /proyecto-simple y contiene todo lo necesario para comenzar a trabajar. Suponiendo que trabajas en un servidor local, la estructura básica de archivos es la siguiente:

/proyecto-simple/Gruntfile.js
/proyecto-simple/package.json
/proyecto-simple/ftppass (este archivo cuando necesario debes renombrarlo a .ftppass)
/proyecto-simple/index.html

El directorio donde trabajarás tus assets se llama /assets-dev y contiene:

/proyecto-simple/assets-dev/js/
/proyecto-simple/assets-dev/less/
/proyecto-simple/assets-dev/less/inc/
/proyecto-simple/assets-dev/images/

Los que después de procesados por GruntJS residirán en /assets y son los que debes llamar desde tus archivos HTML:

/proyecto-simple/assets/js/
/proyecto-simple/assets/js/libs/
/proyecto-simple/assets/css/
/proyecto-simple/assets/images/

Para comenzar a trabajar, en Terminal/Consola debes estar en el directorio que estés trabajando:

$ cd /path/to/proyecto-simple/

Para instalar los plugins a utilizarse y que están definidos en package.json:

$ sudo npm install

Con esto se llamarán a todos los repositorios e instalará los paquetes necesarios para hacer las tareas que tenemos asignadas. Esto puede tomar unos minutos y creará un directorio /node_modules en la raíz de tu proyecto. Este directorio sólo le es útil a GruntJS, no debemos utilizarlo en ambiente productivo.

Antes de correr GruntJS, abre Gruntfile.js y revisa los path que concuerden con los que estés trabajando, principamente los relacionados con ftp-deploy (si lo vas a utilizar). Si todo concuerda, acciona el comando:

$ grunt

El cual comenzará a procesar las tareas y se quedará en watch esperando cambios o actualizaciones en los archivos. En este momento debes llamar el directorio de trabajo en tu browser (a través de tu servidor web local) y activar LiveReload. Cuando el ícono cambie es porque está sincronizado con GruntJS y a cada cambio en archivos html/less/js/images en tu proyecto, watch hará que se actualicen los archivos y LiveReload recargará el browser por tí.

Si hay un error en tu sintaxis lo más probable es que GruntJS te avise y deje de correr, por lo que debes corregirlo antes de continuar.

Deploy

Se adjunta el plugin ftp-deploy el que debe utilizarse cuando necesitas mover archivos a tu servidor productivo. Se configura en Gruntfile.js la URL, puerto y dónde se lee el u/p de acceso. Éstos se guardan en un archivo ftppass el que se adjunta, pero en tu directorio de trabajo debe guardarse como archivo oculto .ftppass. Además, está pre-configurado los archivos y directorios que se excluyen, como Gruntfile.js, package.json, /assets-dev y /node_modules entre otros. Cuando necesites subir a productivo tus archivos, desactivas el watch de GruntJS (⌘+. ó ctrl+.) y envías todos tus archivos al servidor con el siguiente comando:

$ grunt ftp-deploy

Happy Coding 🙂

Comentarios

  1. KevinWet [#]

    gay dating nashville
    gay dating software
    dating a gay korean girl

  2. Cpgino [#]

    sildenafil canada prescription – buy sildenafil 100mg purchase viagra australia

  3. KevinWet [#]

    new york gay dating website
    adult gay dating sites
    gay international dating sites

  4. Branden [#]

    Way cool! Some extremely valid points! I appreciate you writing this article and the
    rest of the site is extremely good.

  5. PatrickFax [#]

    generic cialis cialis pills

  6. where web hosting [#]

    Heya! I realize this is somewhat off-topic however I had to ask.

    Does operating a well-established blog like yours require a massive amount
    work? I’m brand new to writing a blog however I do write in my journal on a
    daily basis. I’d like to start a blog so I will be able to share my experience and views online.

    Please let me know if you have any suggestions or tips for new aspiring
    blog owners. Thankyou!

  7. web hosting that [#]

    Hi I am so delighted I found your website, I really found you by accident, while I was researching on Yahoo for something
    else, Anyways I am here now and would just like to say thanks for a tremendous post and a all round exciting blog (I also love
    the theme/design), I don’t have time to read through it all at the
    moment but I have saved it and also added
    in your RSS feeds, so when I have time I will be back to read more, Please do keep up the awesome
    work.

  8. PatrickFax [#]

    cialis price cialis online

  9. bit.ly [#]

    My brother suggested I might like this blog.
    He was entirely right. This post actually made my day.
    You cann’t imagine just how much time I had spent for this information! Thanks!

  10. j.mp [#]

    I’m really enjoying the theme/design of your weblog.
    Do you ever run into any web browser compatibility issues?
    A small number of my blog visitors have complained about my
    site not working correctly in Explorer but looks great in Safari.
    Do you have any suggestions to help fix this issue?

  11. http://t.co/ [#]

    I was able to find good information from your content.

  12. dating for gay daddies [#]

    white asian gay dating site https://gayonlinedating.net/

  13. gay dating tours [#]

    local gay speed dating https://datinggayservices.com/

  14. gay dating sites 2021 [#]

    scruff gay bear dating https://gaydatinglosangeles.com/

  15. jake gay paris illinois dating [#]

    gay and lesbian dating sites https://gayedating.com/

  16. gay sugar daddies dating site [#]

    free gay dating online https://gaydatingcanada.com/

  17. gay poly dating [#]

    walmart promotes gay dating ad https://gay-singles-dating.com/

  18. HenryUnfiP [#]

    christian gay dating
    gay dating salt lake city
    gay muslim dating london

  19. ivermectin1.com [#]

    krim generik ivermectin 1 Automatizacion de tareas para proyectos en Front-End | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ a asian pharmacies ivermectin no prescription

  20. quest bars where [#]

    Pretty! This has been an extremely wonderful article. Many
    thanks for supplying this info. quest bars http://bit.ly/3C2tkMR quest bars

  21. HenryUnfiP [#]

    gay dating site grinder
    gay dad son dating
    dating gay singles

  22. gay dating tips [#]

    dating site for gay teens https://dating-gaym.com/

  23. ivermectin1.com [#]

    stromektolipilleri Automatizacion de tareas para proyectos en Front-End | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin dosage chart for humans

  24. http://tinyurl.com/9ydvf74m [#]

    Hi there, I discovered your blog by way of Google at the
    same time as searching for a comparable matter, your site got
    here up, it seems good. I have bookmarked it in my google
    bookmarks.
    Hi there, simply turned into aware of your blog through Google, and found that it is truly informative.

    I am going to watch out for brussels. I’ll appreciate when you
    proceed this in future. A lot of other people can be benefited from your writing.
    Cheers! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  25. app.gumroad.com [#]

    I got this web page from my friend who told me on the topic of this site
    and at the moment this time I am browsing this website
    and reading very informative articles here.
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  26. ivermectin [#]

    ivermectin 2mg Automatizacion de tareas para proyectos en Front-End | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ stromectol for humans

  27. quest bars on [#]

    Hello, for all time i used to check website posts here early in the break of day, for the reason that i enjoy to find out more and more.
    quest bars http://bitly.com/3jZgEA2 quest bars

  28. j.mp [#]

    Wow, amazing blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your site is
    great, as well as the content! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  29. www.iherb.com [#]

    Excellent, what a website it is! This web site
    gives useful information to us, keep it up. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  30. tinyurl.com [#]

    Hi! I’ve been reading your website for some time now and finally got the courage to go ahead and give you a
    shout out from Kingwood Tx! Just wanted to tell you keep up the
    great job! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  31. coub.com [#]

    We stumbled over here different web address and thought I may as well
    check things out. I like what I see so i am just following you.
    Look forward to looking at your web page repeatedly.

    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  32. http://bit.ly [#]

    Oh my goodness! Amazing article dude! Thanks, However I am going through difficulties with your RSS.
    I don’t understand the reason why I am unable to join it.
    Is there anybody getting the same RSS problems?
    Anybody who knows the solution can you kindly respond?

    Thanx!! ps4 games https://bitly.com/3z5HwTp ps4 games

  33. HenryUnfiP [#]

    scruff gay dating spp
    speed dating in the dark gay
    with t gay dating

  34. zithromaxeska [#]

    zithromax drug class zithromax uso zithrmax

  35. HenryUnfiP [#]

    gay women dating
    dating a gay french man
    dating for gay alternaive

  36. rfulwlguap [#]

    ej7a9y dmnrgezhfhcy, [url=http://nrbptnjewyiy.com/]nrbptnjewyiy[/url], [link=http://ycsmznbfxmyq.com/]ycsmznbfxmyq[/link], http://jpzwybbqphuz.com/

  37. cetirizine hcl 10mg tab [#]

    generic for zyrtec – http://allergyd.com

  38. drivecam login lytx [#]

    generic zyrtec – http://allergyd.com

  39. stromectol cost [#]

    ivermectin for humans for sale https://stromectolforte.com/# can you buy ivermectin over the counter ivermectin tablets order

  40. stromectolforte.com [#]

    stromectol xr https://stromectolforte.com/ ivermectin cream walmart is ivermectin safe for people

  41. ivermectina preço [#]

    sanford health plan http://stromectl.com – ivermectin dose

  42. stromectolforte.com [#]

    stromectol chung https://stromectolforte.com/# buy stromectol pills ivermectin for humans

  43. buymodalertreddit [#]

    modafinil 100mg https://provigilandmodafinil.com/

  44. bactrim coverage [#]

    trimethoprim sulfamethoxazole trimoxazole dosage

  45. accutane coupon [#]

    isotretinoin side effects https://sotretisotretinoin.com/

  46. provigil100mg [#]

    https://modafinilpleasure.com/ armodafinil vs modafinil

CSSLab