Automatización del flujo de trabajo de JavaScript usando Grunt y Gulp

Cuando eres nuevo en el desarrollo de aplicaciones para el usuario y comienzas a dominar HTML5, CSS y JavaScript, el siguiente paso obvio es poner las herramientas que la mayoría de los desarrolladores utilizan para mantenerse sanos en este espacio complejo. También mereces tener más flexibilidad y funciones al escribir tus hojas de CSS utilizando Less. Tú también mereces optimizar el ancho de banda al minificar tu código JS. También mereces poder verificar automáticamente que tu código JS sea bueno usando JSHint.

Te mereces todo esto bueno.

Así que empieza a usar todas estas excelentes herramientas a mano, ejecutando más y más líneas de comando manualmente. A veces, olvidas ejecutar el compilador Less... A veces olvidas ejecutar JSHint y se envía un error...

Y de repente te preguntas: ¿Hay alguna solución para automatizar todas estas herramientas? ¿Cómo se puede crear un flujo de trabajo repetible para evitar errores?

Obviamente existe una solución, y dos herramientas en particular están esperando que comiences: Grunt y Gulp.

Como novato que usa estas herramientas, te estás preguntando cómo funcionan y cuál usar, ¿no es así? Bueno, perfecto entonces, ¡estás leyendo el artículo correcto!

1. La muestra que usaremos

Te daré las bases para usar Grunt y Gulp usando un ejemplo muy simple que puedes descargar desde GitHub.

Es un sitio web simple compuesto de tres archivos:

Styles.less define la hoja de CSS de una manera más enriquecida de lo que es posible usando un archivo CSS estándar. Al final usaremos el compilador Less para crear un archivo de styles.css. Usando Less, podemos, por ejemplo, usar variables en el archivo CSS:

Obtén más información acerca de Less en esta guía de inicio rápido.

El código JavaScript y HTML son realmente simples. La página debe verse así:

2. Comprender el administrador de paquetes Node.js

Primero debes comprender cómo funciona el Administrador de paquetes de Node.js (npm).

Npm es la herramienta provista con Node.JS. Se usa para obtener herramientas y frameworks mientras se resuelven automáticamente sus dependencias.

Por ejemplo, para usar Less y compilarlo en un archivo CSS utilizable en la web, primero necesitas instalar Less usando este comando:

1

npm install -g less

Nota: Para obtener la línea de comando npm, debes instalar Node.js desde el sitio web Node.

Una vez hecho esto, puedes ejecutar este comando para compilar archivos .less en .css:

1

lessc styles.less > styles.css

Npm usa un archivo que crea y almacena en la carpeta local en la que está trabajando: package.json. Este archivo utiliza el formato de JavaScript Object Notation (JSON) para que npm sepa qué herramienta y versión está instalada y las estructuras utilizadas por el proyecto actual (que está representado por la carpeta actual).

Este archivo es importante para Grunt y Gulp porque contendrá la lista de complementos que se han descargado y que se pueden usar en la automatización de tu flujo de trabajo.

Para crear un archivo package.json vacío puedes usar el siguiente comando npm:

1

npm init

Pasarás por algunas preguntas que puedes responder utilizando la opción predeterminada, y luego estarás listo para comenzar.

En este archivo, tendrás dos tipos de dependencias:

• Los necesarios para la ejecución de tu aplicación web o la aplicación Node.js
• Los necesarios para la fase de desarrollo (como Less) y que se utilizan para compilar o verificar tu código

Npm básicamente te ofrece tres formas de instalar paquetes:

• Globalmente en tu máquina usando la opción -g o -global
• Para fines de ejecución, localmente en tu carpeta de proyecto sin usar opciones (solo npm install [herramientas o framework])
• Para desarrollo, localmente en tu carpeta de proyectos usando la opción --save-dev

El tercero creará una sección/propiedad devDependencies dentro del archivo package.json.

3. Grunt

¿Qué es Grunt?

Grunt es un pionero en el área de automatizar el flujo de trabajo de JavaScript. Hay muchos usuarios de Grunt conocidos como Twitter, jQuery y Modernizr.

El principio básico para Grunt es brindarnos una manera fácil de ejecutar tareas. Una tarea es un conjunto de archivos con código y configuración ya creados para ti. Puedes obtener nuevas tareas instalando complementos de Grunt que obtendrás usando npm. Puedes encontrar un complemento para casi todas las herramientas que puedas usar, como Less y JSHint.

Para ejecutar Grunt, debes crear un Gruntfile en el que especifiques qué tareas deseas ejecutar y la configuración para cada una de ellas. Una vez hecho esto, solo tienes que ejecutar el comando grunt especificando la tarea que deseas ejecutar (predeterminada o específica) y lo hará automáticamente.

Ahora veamos una guía paso a paso para configurar todo esto.

Paso 1. Crea el archivo Package.json

Usa npm para iniciar el archivo:

1

npm init

Deberás responder algunas preguntas como el nombre del proyecto y cuál es el archivo .js predeterminado. También puedes optar por crear el archivo manualmente y establecer su contenido en:

1

{

2

   "name": "project-name",

3

   "devDependencies": {},

4

   "dependencies": {}

5

 }

Paso 2. Instalar Grunt global y localmente

Necesitas instalar Grunt globalmente para obtener la línea de comando y localmente para inicializar todo lo necesario para el proyecto.

Ejecutar:

1

npm install -g grunt

Luego ejecútalo localmente:

1

npm install grunt --save-dev

Nota: No olvides la parte -dev para que se especifique como una de las dependencias de desarrollo (devDependencies) en el archivo package.json.

Paso 3. Crea el GruntFile.js

Grunt funciona usando un archivo llamado gruntFile.js. Este archivo contiene todo lo que necesita Grunt, es decir:

• Configuración para tareas
• Tareas personalizadas
• Carga de tareas

Grunt espera que el archivo exporte una sola función que toma un parámetro llamado "grunt". Utilizarás este objeto para realizar todas las acciones relativas de Grunt.

Aquí hay un archivo de grunt mínimo que solo lee el archivo package.json y crea una tarea predeterminada que no ejecuta nada.

Nota: Coloca el archivo en la carpeta del proyecto, al lado del archivo package.json.

1

module.exports = function(grunt) {

2

3

   // Project configuration.

4

   grunt.initConfig({

5

     pkg: grunt.file.readJSON('package.json'),

6

   });

7

8

   // Default task(s).

9

   grunt.registerTask('default', []);

10

11

 }; 

Puedes ejecutarlo para asegurarte de que todo esté configurado correctamente.

Para hacerlo, abre la consola de comandos en la carpeta del proyecto y ejecuta:

1

grunt

Deberías ver algo como esto:

Paso 4. Agrega tu primera tarea: JSHint

Ahora que tu Gruntfile está listo, el siguiente paso es agregar un complemento y usarlo. Todos los complementos se pueden encontrar en el listado en el sitio web de Grunt. Una de las tareas comunes realizadas en un Gruntfile es verificar si la sintaxis de JavaScript es correcta. Para hacer eso, generalmente usamos JSHint.

Vamos a agregar esto a tu flujo de trabajo grunt.

Si buscas JSHint en la página de plugins de grunt, encontrarás gruunt-contrib-jshint, ¡que corresponde a lo que necesitamos!

En la carpeta del proyecto, ejecuta:

1

npm install grunt-contrib-jshint --save-dev

Una vez hecho esto, debes agregarlo a tu Gruntfile.js. Hay dos pasos simples para eso:

1. Carga el complemento.
2. Configura la tarea.

Para cargar el complemento, usa la función loadNpmTasks:

1

// Load the plugin that provides the "jshint" task

2

 grunt.loadNpmTasks('grunt-contrib-jshint');

La configuración se realiza en la función initConfig donde debes agregar una nueva propiedad al objeto dado en el parámetro. Éste debe ser el nombre de la tarea que deseas agregar y está relacionado con el complemento que usas. La mejor manera de conocer ese nombre y la lista de opciones disponibles para la tarea es echarle un vistazo a la documentación del complemento. Siempre encontrarás una muestra bien documentada.

Por ejemplo, en nuestra muestra queremos verificar todos los archivos JavaScript excepto gruntfile.js. También queremos activar un conjunto de reglas para verificar los archivos de JavaScript, como eqeqeq, para garantizar que usemos el triple de igualdad cuando sea necesario.

Aquí está la función initConfig modificada:

Puedes ejecutar tu tarea utilizando la siguiente línea de comando (donde especificas el nombre de la tarea como parámetro para grunt):

1

grunt jshint

El resultado está aquí:

Solo tienes que ejecutar ese comando y te pedirá automáticamente cualquier error que encuentre.

¡Felicitaciones, ahora tienes una tarea automatizada en tu flujo de trabajo!

Paso 5. Agrega una segunda tarea: Compilación Less

Tu tarea JSHint funciona bien, pero está un poco sola en el flujo de trabajo. Por lo general, utilizamos herramientas como Grunt para ejecutar más de una tarea.

Es realmente fácil agregar más de ellos, ya que solo tienes que seguir los mismos pasos. Digamos que ahora deseas agregar la compilación de tu archivo less dentro del proceso automatizado. Si buscas en los plugins de Grunt, encontrarás un plugin grunt-contrib-less que puedes instalar en tu carpeta de proyecto:

1

npm install grunt-contrib-less --save-dev

Al igual que con la tarea JSHint, debes agregar la configuración:

Luego, carga la tarea:

Ahora puedes ejecutar Grunt y especificar la tarea less: esto lanzará solo Less. Eso está bien, pero quieres ejecutar todas las tareas, ¿verdad? Esa es la función de la tarea predeterminada.

Cuando acabas de ejecutar grunt sin especificar ninguna tarea, buscará una tarea predeterminada y ejecutará todas las tareas especificadas en su matriz. Puedes modificarlo para ejecutar less y jshint. Ten en cuenta que para agregar un grupo de tareas como predeterminado, debes llamar a la función registerTask:

A partir de ahora, cuando ejecutes grunt, se ejecutará jshint, y luego less:

Puedes agregar cualquier tarea que desees, y también puedes especificar otro grupo de tareas como por defecto y llamarlas pasando su nombre como argumento a la línea de comando grunt.

Fácil, ¿verdad?

Paso 6. Utiliza Watch para no tener que ejecutar Grunt manualmente

Ahora, eres un desarrollador feliz. Todas tus tareas repetitivas están automatizadas dentro de un flujo de trabajo pesado, y solo tienes que ejecutar grunt para que se ejecuten. Pero se puede hacer aún más fácilmente. Se puede hacer de forma automática.

Para hacer eso, puedes agregar una tarea específica llamada watch. Esta tarea inspeccionará constantemente tu carpeta de trabajo y, en función de las reglas, cuando se modifique un archivo, grunt ejecutará una tarea asociada.

Primero, instala watch en tu carpeta de proyectos:

1

npm install grunt-contrib-watch --save-dev

Llénalo como todas las demás tareas utilizando la función loadNpmTasks y configúralo. La parte de configuración es un poco diferente aquí porque necesitas especificar una configuración para cada tarea que quieras cubrir usando watch.

Para obtener más información, puedes leer la documentación completa de esta tarea.

Cuando desees activar watch, solo debes ejecutar el siguiente comando:

1

grunt watch

Y ejecutará tareas cada vez que se cambie un archivo y este archivo esté dentro del alcance de los archivos observados para la tarea específica.

¡Y eso es! Ahora sabes todo para crear un flujo de trabajo automatizado utilizando grunt.

4. Gulp

¿Qué es Gulp?

Gulp es una alternativa a grunt. Es un poco más reciente y tiene la reputación de ser más flexible que grunt. Antes de elegir cuál usarás, echemos un vistazo a cómo funciona gulp.

Gulp es una herramienta para automatizar el flujo de trabajo. Al igual que grunt, funciona usando npm y el archivo package.json. Todos los complementos disponibles también se descargarán usando npm y se agregarán como devDependencies en el archivo package.json.

Una de las principales diferencias es que Gulp usa streams. Un stream es un conjunto de funciones a través de las cuales un archivo irá y se modificará en la memoria. El archivo se escribirá en el disco solo al final del proceso, por lo que es más eficiente. Las tareas de grunt, por otro lado, funcionan como silos y no pueden encadenarse.

Echemos un vistazo rápido a cómo funciona Gulp siguiendo unos sencillos pasos.

Paso 1. Crea el archivo Package.json

Al igual que Grunt, primero debes crear el archivo package.json. Puedes usar exactamente la misma técnica que utilizaste para la muestra de Grunt.

Paso 2. Instalar Gulp y Gulp-Util globalmente y localmente

Una vez que se crea el archivo package.json, instala gulp global y localmente usando:

1

npm install -g gulp

y

1

npm install gulp --save-dev

Esto instalará la línea de comandos gulp y todo lo que se necesita para ejecutar un flujo de trabajo gulp.

Luego debes instalar gulp utils, que contiene funciones comunes compartidas por otros complementos:

1

npm install gulp-util --save-dev

Finalmente, crea el archivo mínimo gulp, que se verá así:

Como puedes ver, es un poco diferente de la sintaxis de grunt. En gulp, los complementos se cargan usando la sintaxis require, como es posible que estés acostumbrado si eres un desarrollador de Node.js. También hay una tarea predeterminada definida usando la función gulp.task.

Si ejecutas la línea de comando gulp usando la consola de comandos en la carpeta del proyecto, deberías ver un resultado como este:

Paso 3. Usando tu primera tarea: Compilación con Less

Para usar un plugin en gulp, usas la misma función que usamos para crear la tarea predeterminada. Esto se debe a que no tienes que usar un nombre específico para crear una tarea. Simplemente llamas a gulp.task, estableces el nombre que deseas y dale una función de JavaScript como segundo parámetro. Cuando gulp ejecuta la tarea, ejecutará esta función.

Para usar un complemento, lo llama usando el nombre que elegiste cuando lo requerías. Por lo general, lo llamas como parte de un flujo de trabajo de transmisión que generalmente comienzas con una selección de archivos. Esto se hace con la función gulp.src. Seleccionará un grupo de archivos y devolverá un flujo que puede ser utilizado por otra función usando un pipe. Así es como puedes encadenar múltiples acciones sin escribirlas en el disco. Acabas de pasar la secuencia de un plugin a otro.

Aquí hay una muestra básica para Less:

Primero requerimos require ('gulp-less') cargar el complemento less para gulp. (Lo obtuvimos usando npm install gulp-less --save-dev).

Entonces gulp.src seleccionará todos los archivos .less, hace 'pipe' a la función less() y finalmente se 'canaliza' a gulp.dest, que indica dónde escribir el resultado. Como gulp.src puede seleccionar más de un archivo, gulp.dest especifica una carpeta.

Una vez que comprendas el modelo de piping, puedes obtener fácilmente el mismo resultado que el que obtuvimos utilizando grunt.

El poder de Gulp es que puedes crear tareas personalizadas en las que llames a más de un complemento y donde puedas asociarlas de la manera que desees.

Nota: Obviamente también hay un plugin gulp-watch que puedes usar para automatizar el lanzamiento de tu flujo de trabajo.

Conclusión: ¿Cuál elegir?

Espero que ahora tengas una comprensión más clara de por qué necesitas un flujo de trabajo automatizado y cómo puedes usar Grunt o Gulp para obtenerlo.

Elegir uno de ellos está más relacionado con la tarea que deseas lograr.

Grunt es fácil de usar. No tienes que entender el sistema de piping. Y lograr tareas simples será más sencillo. Es una herramienta muy madura, utilizada por muchos editores y desarrolladores conocidos, y hay muchos complementos disponibles.

Dicho esto, la forma en que Gulp está diseñado puede darte mucha flexibilidad. Ha existido desde hace bastante tiempo, e incluso si no encontrarás tantos complementos como lo harás para Grunt, todos los clásicos estarán disponibles para Gulp.

Si estás utilizando un flujo de trabajo realmente estándar con pasos comunes como JSHint, uglifying, CSS validating, etc., Grunt es una buena opción. Si estás haciendo tareas más complicadas, Gulp será un buen wingman.

Más información

• Sitio web de Grunt
• Sitio web de Gulp
• Utiliza Grunt en Microsoft Visual Studio

Más práctica con JavaScript

Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript, y tenemos la misión de crear mucho más con Microsoft Edge. Aquí hay algunos para ver:

• Microsoft Edge Web Summit 2015 (Una serie completa de lo que se puede esperar con el nuevo navegador, nuevas características de la plataforma web y oradores invitados de la comunidad)
• Lo mejor de // BUILD / y Windows 10 (Incluido el nuevo motor de JavaScript para sitios y aplicaciones)
• Avanzando en JavaScript sin romper la Web (la reciente conferencia de Christian Heilmann)
• Hosted Web Apps y Web Platform Innovations (Una inmersión profunda en temas como manifold.JS)
• Consejos de rendimiento prácticos para hacer que tu HTML/JavaScript sea más rápido (Una serie de siete partes desde diseños receptivos hasta juegos casuales para la optimización del rendimiento)
• La plataforma web moderna Jump Start (Los fundamentos de HTML, CSS y JavaScript)

Y algunas herramientas gratuitas para comenzar: Herramientas de Visual Studio Code, Azure Trial y cross-browser, todas disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie web dev tech de Microsoft. Nos complace compartir contigo Microsoft Edge y el nuevo motor de renderizado EdgeHTML. Obtén máquinas virtuales gratuitas o realiza pruebas de forma remota en tu Mac, iOS, Android o dispositivo Windows @ http://dev.modern.ie/.