Una introducción a la automatización de JavaScript con Gulp

Como desarrolladores web, a veces nos encontramos repitiendo las mismas tareas tediosas una y otra vez. Si considera cuánto tiempo se pierde ejecutando un comando de compilación o presionando actualizar en su navegador, se dará cuenta de que puede estar ahorrando mucho tiempo. Además, al automatizar sus procesos, puede concentrarse en la tarea en cuestión en lugar de abandonar temporalmente "la zona" (su estado de productividad).

En este tutorial de automatización de JavaScript, aprenderá cómo automatizar su proceso de diseño y desarrollo con Gulp. Si estás más orientado al diseño, te animo a que superes cualquier miedo que tengas y sigas leyendo. Por otro lado, si usted es un desarrollador, podrá pasar directamente a través de esto una vez que comprenda la lógica detrás de esto.

Gulp es un sistema de compilación que emplea los flujos de Node.js para implementar un enfoque asíncrono de fuente-destino para la automatización. Todo está escrito en JavaScript, por lo que es fácil para cualquier persona con conocimientos intermedios de codificación comenzar. Un proceso de compilación de Gulp consiste en una colección de observadores y tareas. Además, la comunidad detrás de Gulp mantiene un enorme directorio de complementos dentro de npm que ayuda a realizar cualquier tarea, desde concatenar JavaScript hasta crear fuentes de iconos a partir de SVG.

Alternativas a Gulp

Hay muchas alternativas, la mayoría de las cuales han surgido en los últimos años, la más notable es Grunt. La contienda entre Gulp y Grunt nunca tendrá un claro ganador, ya que ambos tienen sus pros y sus contras, de ahí que evitaré profundizar en eso. En pocas palabras, la gran dependencia de Grunt en la configuración es lo que lleva a las personas hacia el enfoque de JavaScript de Gulp. Mientras tanto, las implementaciones de GUI nativas como Koala han ganado algo de terreno, principalmente de personas que se niegan a entrar en la codificación. Sin embargo, con las aplicaciones integradas es imposible alcanzar el nivel de personalización y capacidad de ampliación que ofrece Gulp.

Fundamentos de automatización de procesos

Complementos

Los complementos son los medios a través de los cuales Gulp realiza cada proceso. Los complementos se instalan a través de npm y se inician usando "requerir".

Tareas

Para Gulp, las tareas siempre tienen un origen y un destino. Entre ellos se encuentran las tuberías que llaman a cada complemento y envían los resultados transmutados a la siguiente tubería.

Globos

Los globs son patrones comodín que se refieren a archivos. Los globos o conjuntos de globos se utilizan como entradas en el origen de la tarea.

Vigilantes

Los observadores observan los archivos de origen en busca de cambios y llaman a tareas cada vez que se detecta un cambio.

gulpfile.js

Este es el archivo JavaScript al que apunta el comando "gulp". Contiene todo, desde las tareas hasta los observadores u otras piezas de código utilizadas por las tareas.

Una tarea sencilla

Para comenzar, necesita Node.js y un shell de línea de comandos con acceso de administrador. Puede descargar Node.js desde aquí. Una vez instalado, puede ejecutar el siguiente comando para asegurarse de que npm esté actualizado.

 sudo npm install npm -g

El indicador -g indica que la instalación será global.

Ahora está listo para instalar Gulp y comenzar a llamar algunas tareas simples. Use el siguiente comando para instalar Gulp globalmente.

 sudo npm install gulp -g

Tenga en cuenta que también puede usar el mismo comando para actualizar.

Puede descargar el kit de inicio que lo ayudará con su primera tarea desde toptal-gulp-tutorial/step1. Incluye una tarea muy simple que compila archivos SCSS a CSS. Está utilizando el complemento gulp-sass, que emplea libsass. Elegí libsass aquí porque es mucho más rápido que la alternativa de Ruby, aunque carece de algunas de sus funciones. Una vez en el directorio raíz de su proyecto, puede usar el siguiente comando para instalar todos los complementos necesarios.

 npm install

Este comando lee el archivo package.json e instala todas las dependencias requeridas. Estamos usando "npm install" aquí como abreviatura de lo siguiente:

 npm install gulp --save-dev npm install gulp-sass --save-dev

El indicador “–save-dev” agrega los complementos seleccionados a las dependencias de desarrollo de package.json para que la próxima vez que desee instalar todo, pueda usar la práctica “instalación npm”.

En este punto, puede ejecutar su primera tarea. Ejecute el siguiente comando y observe cómo todos los archivos SCSS en la carpeta /scss se compilan en CSS en el directorio correspondiente:

 gulp scss

Tenga en cuenta que en este ejemplo estamos especificando la tarea que se ejecutará. Si omitiéramos el nombre de la tarea, se ejecutaría la denominada “predeterminada”.

Tutorial de código

Lo anterior se logra en solo 7 líneas de código JavaScript. Seguramente, se sentirá como en casa una vez que capte la simplicidad de esto:

 var gulp = require('gulp'); var scss = require('gulp-sass');

Al principio, inicializamos todos los complementos que usaremos. Gulp es el único del que no podemos prescindir:

 gulp.task('scss', function() {

Definimos la tarea denominada “scss”:

 return gulp.src('scss/*.scss')

Establezca los archivos de origen para la tarea. Estos se definen como globos. En este ejemplo nos referimos a todos los archivos de la carpeta “scss/” que terminan en “.scss”.

 .pipe(scss())

En este punto, llamamos al complemento gulp-sass que definimos previamente:

 .pipe(gulp.dest('css'));

Finalmente, usamos "gulp.dest" para definir la carpeta de destino de nuestros archivos. Esto también podría ser un nombre de archivo único si los archivos estuvieran concatenados.

Para mejorar aún más esta implementación de automatización de procesos, puede intentar incluir algunos otros complementos de Gulp. Por ejemplo, es posible que desee minimizar el producto final de su tarea mediante gulp-minify-css y agregar automáticamente prefijos de proveedores con gulp-autoprefixer.

Empleando a un vigilante

He creado un kit de inicio de Watcher que puede usar de inmediato. Puede descargarlo desde toptal-gulp-tutorial/step2. Incluye una versión mejorada de la tarea SCSS creada anteriormente y un observador que observa los archivos de origen y llama a la tarea. Para iniciarlo, utilice el siguiente comando:

 gulp

Este comando inicia la tarea "predeterminada" que inicia el observador. En este punto, puede editar cualquiera de los archivos SCSS y ver cómo se vuelven a compilar los archivos CSS. Podrás ver las notificaciones de Gulp en la línea de comandos.

Tutorial de código

Hemos configurado un observador para nuestra tarea con solo 3 líneas adicionales de código. Dicho esto, el kit de inicio del observador no difiere mucho del ejemplo introductorio. En esta sección, repasaremos todas las adiciones y modificaciones.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

En este ejemplo, la fuente de Gulp se proporciona con una matriz de globos. El primero incluye todos los archivos que terminan en “.scss” también en subcarpetas, y el segundo excluye los que comienzan con “_”. De esta manera, podemos usar la función integrada @import de SCSS para concatenar el archivo _page.scss.

 gulp.task('default', ['scss'], function() {

Aquí definimos la tarea "predeterminada". La tarea "scss" se ejecuta como una dependencia antes de "predeterminado".

 gulp.watch('scss/**/*.scss', ['scss']);

Finalmente, llamamos a la función de observación de Gulp para señalar cualquier archivo que termine en ".scss" y cada vez que ocurra un evento de cambio, para ejecutar la tarea "scss".

Ahora está listo para crear nuevos observadores para otros procesos automatizados, como la concatenación de JavaScript, las sugerencias de código, la compilación de CoffeeScript o cualquier otra cosa que se le ocurra. Para profundizar en esta implementación de automatización de JavaScript, propongo agregar gulp-notify que le notificará cuando se ejecute una tarea. Además, puede crear una tarea separada para minimizar el código CSS resultante y hacer que la tarea "scss" se ejecute como una dependencia de eso. Finalmente, puede usar gulp-rename para agregar el sufijo ".min" a los archivos resultantes.

Complementos avanzados de Gulp para la automatización de JavaScript

Existen miles de complementos en la base de complementos de Gulp, algunos de los cuales van mucho más allá de la simple automatización de JavaScript de un proceso de compilación. Aquí hay algunos ejemplos destacados:

Sincronización del navegador

BrowserSync inyecta CSS, JavaScript y actualiza automáticamente el navegador cada vez que se realiza un cambio. Además, contiene una función de modo fantasma que se puede usar para asustar a sus colegas o para acelerar en gran medida las pruebas de su navegador.

Navegador

Browserify analiza las llamadas "requeridas" en su aplicación y las convierte en un archivo JavaScript incluido. Además, hay una lista de paquetes npm que se pueden convertir en código de navegador.

paquete web

Similar a Browserify, Webpack tiene como objetivo convertir módulos con dependencias en archivos estáticos. Este le da más libertad al usuario en cuanto a cómo se establecerán las dependencias del módulo y no pretende seguir el estilo de código de Node.js.

Karma

Gulp-karma trae el infame entorno de prueba a Gulp. Karma sigue el enfoque de configuración mínima que Gulp también respalda.

Conclusión

En este tutorial de automatización de procesos, he demostrado la belleza y la simplicidad de usar Gulp como herramienta de construcción. Al seguir los pasos descritos en el tutorial, ahora estará listo para automatizar completamente su proceso de desarrollo de software tanto en sus proyectos futuros como heredados. Invertir algo de tiempo en configurar un sistema de compilación para sus proyectos más antiguos sin duda le ahorrará un tiempo precioso en el futuro.

Estén atentos para un tutorial de Gulp más avanzado próximamente.