Gulp para principiantes

Gulp es una herramienta que te ayuda con varias tareas cuando se trata de desarrollo web. A menudo se utiliza para hacer tareas de front-end como:

• Hacer funcionar un servidor web
• Recargar el navegador automáticamente cada vez que se guarda un archivo
• Usar preprocesadores como Sass o LESS
• Optimizar activos como CSS, JavaScript e imágenes

¡Nota importante! Este artículo fue escrito para Gulp 3.x, pero ahora Gulp 4.x está fuera y se recomienda. Como cualquier cambio de versión importante, las APIs tienen cambios de ruptura. Si instalas Gulp 4 e intentas hacer algunas de las cosas de este artículo, no funcionarán. Haremos algunas notas de eso salpicadas aquí para recordártelo. Esto parece un buen comienzo de Gulp 4.

Esta no es una lista exhaustiva de las cosas que Gulp puede hacer. Si estás lo suficientemente loco, puedes incluso construir un generador de sitios estáticos con Gulp (¡lo he hecho!). Así que sí, Gulp es extremadamente potente, pero tendrás que aprender a usar Gulp si quieres crear tus propios procesos de construcción personalizados.

Así que para eso es este artículo. Te ayuda a ser tan bueno con los fundamentos de Gulp que puedes empezar a explorar todo lo demás por ti mismo.

Antes de sumergirnos en el trabajo con Gulp, vamos a hablar de por qué es posible que desee utilizar Gulp en lugar de otras herramientas similares.

¿Por qué Gulp?

Las herramientas como Gulp se denominan a menudo «herramientas de construcción» porque son herramientas para ejecutar las tareas de construcción de un sitio web. Las dos herramientas de construcción más populares ahora mismo son Gulp y Grunt. (Chris tiene un post sobre cómo empezar con Grunt aquí). Pero hay otras, por supuesto. Broccoli se centra en la compilación de activos, una de las tareas más comunes de la herramienta de construcción.

Ya hay varios artículos que cubren la diferencia entre Grunt y Gulp y por qué usted podría utilizar uno sobre otro. Puedes consultar este artículo, este otro, o este otro si estás interesado en saber más. Brunch es similar en su enfoque en los activos, y se agrupa en algunas de las otras tareas más comunes como un servidor y un observador de archivos.

La principal diferencia es cómo se configura un flujo de trabajo con ellos. Las configuraciones de Gulp tienden a ser mucho más cortas y simples en comparación con Grunt. Gulp también tiende a correr más rápido.

Pasemos ahora a ver cómo configurar un flujo de trabajo con Gulp.

Qué estamos configurando

Al final de este artículo, tendrás un flujo de trabajo que hace las tareas que hemos señalado al principio de este artículo:

• Enciende un servidor web
• Compila Sass a CSS
• Refresca el navegador automáticamente cada vez que guarda un archivo
• Optimiza todos los activos (CSS, JS, fuentes e imágenes) para la producción

También aprenderás a encadenar diferentes tareas en comandos simples que son fáciles de entender y ejecutar.

Comencemos por instalar Gulp en tu ordenador.

Instalación de Gulp

Necesitas tener Node.js (Node) instalado en tu ordenador antes de poder instalar Gulp.

Si no tienes Node instalado ya, puedes conseguirlo descargando el instalador de paquetes desde la web de Node.

Cuando hayas terminado de instalar Node, puedes instalar Gulp utilizando el siguiente comando en la línea de comandos:

$ sudo npm install gulp -g

Nota: Sólo los usuarios de Mac necesitan la palabra clave sudo. (Ver el primer comentario de Pawel Grzybek si no quieres usar sudo). Y recuerde que el «$» en el código anterior sólo simboliza el símbolo del sistema. No es realmente parte del comando que se ejecuta.

El comando npm install que hemos utilizado aquí es un comando que utiliza Node Package Manager (npm) para instalar Gulp en tu ordenador.

La bandera -g en este comando le dice a npm que instale Gulp globalmente en tu ordenador, lo que te permite usar el comando gulp en cualquier parte de tu sistema.

Los usuarios de Mac necesitan la palabra clave extra sudo en el comando porque necesitan derechos de administrador para instalar Gulp globalmente.

Ahora que tienes Gulp instalado, vamos a hacer un proyecto que utilice Gulp.

Creando un proyecto Gulp

Primero, crearemos una carpeta llamada project para que sirva como raíz de nuestro proyecto a medida que avanzamos en este tutorial. Ejecute el comando npm init desde dentro de ese directorio:

# ... from within our project folder$ npm init

El comando npm init crea un archivo package.json para su proyecto que almacena información sobre el proyecto, como las dependencias utilizadas en el proyecto (Gulp es un ejemplo de una dependencia).

npm init le pedirá:

Una vez creado el archivo package.json, podemos instalar Gulp en el proyecto mediante el siguiente comando:

$ npm install gulp --save-dev

Esta vez, estamos instalando Gulp en project en lugar de instalarlo globalmente, por lo que hay algunas diferencias en el comando.

Verás que la palabra clave sudo no es necesaria porque no estamos instalando Gulp globalmente, así que -g tampoco es necesario. Hemos añadido --save-dev, que indica al equipo que añada gulp como dependencia dev en package.json.

Si compruebas la carpeta del proyecto cuando el comando haya terminado de ejecutarse, deberías ver que Gulp ha creado una carpeta node_modules. También debería ver una carpeta gulp dentro de node_modules.

Ya estamos casi listos para empezar a trabajar con Gulp. Antes de hacerlo, tenemos que tener claro cómo vamos a utilizar Gulp para el proyecto, y parte de eso es decidir la estructura de directorios.

Determinar la estructura de carpetas

Gulp es lo suficientemente flexible como para trabajar con cualquier estructura de carpetas. Sólo tendrás que entender el funcionamiento interno antes de ajustarlo para tu proyecto.

Para este artículo, utilizaremos la estructura de una webapp genérica:

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

En esta estructura, utilizaremos la carpeta app para fines de desarrollo, mientras que la carpeta dist (como en «distribución») se utiliza para contener archivos optimizados para el sitio de producción.

Como app se utiliza para fines de desarrollo, todo nuestro código se colocará en app.

Tendremos que tener en cuenta esta estructura de carpetas cuando trabajemos en nuestras configuraciones de Gulp. Ahora, vamos a empezar creando tu primera tarea Gulp en gulpfile.js, que almacena todas las configuraciones de Gulp.

Escribiendo tu primera tarea Gulp

El primer paso para usar Gulp es requireen el gulpfile.

var gulp = require('gulp');

La sentencia require le dice a Node que busque en la carpeta node_modules un paquete llamado gulp. Una vez encontrado el paquete, asignamos su contenido a la variable gulp.

Ahora podemos empezar a escribir una tarea gulp con esta variable gulp. La sintaxis básica de una tarea gulp es:

gulp.task('task-name', function() { // Stuff here});

task-namese refiere al nombre de la tarea, que se utilizaría siempre que se quiera ejecutar una tarea en Gulp. También puede ejecutar la misma tarea en la línea de comandos escribiendo gulp task-name.

Para probarlo, vamos a crear una tarea hello que diga Hello Zell!.

gulp.task('hello', function() { console.log('Hello Zell');});

Podemos ejecutar esta tarea con gulp hello en la línea de comandos.

$ gulp hello

La línea de comandos devolverá un registro que dice Hello Zell!.

Las tareas Gulp suelen ser un poco más complejas que esto. Suelen contener dos métodos adicionales de Gulp, además de una variedad de plugins de Gulp.

Aquí está el aspecto de una tarea real:

Como puedes ver, una tarea real toma dos métodos Gulp adicionales – gulp.src y gulp.dest.

gulp.src le dice a la tarea Gulp qué archivos usar para la tarea, mientras que gulp.dest le dice a Gulp dónde sacar los archivos una vez completada la tarea.

Intentemos construir una tarea real en la que compilemos archivos Sass en archivos CSS.

Preprocesamiento con Gulp

Podemos compilar Sass a CSS en Gulp con la ayuda de un plugin llamado gulp-sass. Puedes instalar gulp-sass en tu proyecto usando el comando npm install como hicimos para gulp.

También queremos usar la bandera --save-dev para asegurarnos de que gulp-sass se añade a devDependencies en package.json.

$ npm install gulp-sass --save-dev

Tenemos que require gulp-sass de la carpeta node_modules al igual que hicimos con gulp antes de poder utilizar el plugin.

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Podemos utilizar gulp-sass sustituyendo aGulpPlugin() por sass(). Como la tarea está destinada a compilar Sass en CSS, vamos a nombrarla sass.

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Necesitaremos proporcionar a la tarea sass archivos de origen y un destino para que la tarea funcione, así que vamos a crear un archivo styles.scss en la carpeta app/scss. Este archivo se añadirá a la tarea sass en gulp.src.

Queremos dar salida al archivo styles.css eventual a la carpeta `app/css`, que sería el destination para gulp.dest.

Queremos probar que la tarea sass funciona como queremos. Para ello, podemos añadir una función Sass dentro de styles.scss.

// styles.scss.testing { width: percentage(5/7);}

Si ejecutas gulp sass en la línea de comandos, ahora deberías poder ver que se ha creado un archivo styles.css en app/css. Además, tiene el código donde percentage(5/7) fue evaluado en 71.42857%.

/* styles.css */.testing { width: 71.42857%; }

¡Así sabemos que la tarea sass funciona!

A veces necesitamos la capacidad de compilar más de un archivo .scss en CSS al mismo tiempo. Podemos hacerlo con la ayuda de Node globs.

Globbing en Node

Los globs son patrones de coincidencia de archivos que te permiten añadir más de un archivo en gulp.src. Es como las expresiones regulares, pero específicamente para las rutas de los archivos.

Cuando se utiliza un glob, el ordenador comprueba los nombres de archivo y las rutas para el patrón especificado. Si el patrón existe, entonces un archivo es comparado.

La mayoría de los flujos de trabajo con Gulp tienden a requerir sólo 4 patrones globbing diferentes:

1. *.scss: El patrón * es un comodín que coincide con cualquier patrón en el directorio actual. En este caso, coincidimos con cualquier archivo que termine en .scss en la carpeta raíz (project).
2. **/*.scss: Esta es una versión más extrema del patrón * que coincide con cualquier archivo que termine en .scss en la carpeta raíz y cualquier directorio secundario.
3. !not-me.scss: El ! indica que Gulp debe excluir el patrón de sus coincidencias, lo cual es útil si tiene que excluir un archivo de un patrón coincidente. En este caso, not-me.scss se excluiría de la coincidencia.
4. *.+(scss|sass): El más + y los paréntesis () permiten a Gulp coincidir con múltiples patrones, con diferentes patrones separados por el carácter de tubería |. En este caso, Gulp coincidirá con cualquier archivo que termine con .scss o .sass en la carpeta raíz.

Cualquier otro archivo Sass que se encuentre dentro de app/scss se incluiría automáticamente en la tarea sass con este cambio. Si añades un archivo print.scss en el proyecto, verás que print.css se generará en app/css.

Ahora hemos conseguido compilar todos los archivos Sass en archivos CSS con un solo comando. La pregunta es, ¿de qué sirve si tenemos que ejecutar gulp sass manualmente cada vez que queremos compilar Sass en CSS?

Por suerte, podemos decirle a Gulp que ejecute automáticamente la tarea sass cada vez que se guarde un archivo mediante un proceso llamado «watching».

Vigilando los archivos Sass en busca de cambios

¡Nota! Gulp Watch fue una de las cosas que cambió mucho de la 3.x a la 4.x. Ver los docs.

Gulp nos proporciona un método watch que comprueba si un archivo fue guardado. La sintaxis del método watch es:

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', ); 

Sin embargo, más a menudo querremos ver más de un tipo de archivo a la vez. Para ello, podemos agrupar varios procesos de vigilancia en una tarea watch:

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Si ejecutas el comando gulp watch ahora mismo, verás que Gulp empieza a vigilar inmediatamente.

Y que ejecuta automáticamente la tarea sass cada vez que guardas un archivo .scss.

Vayamos un paso más allá y hagamos que Gulp recargue el navegador cada vez que guardemos un archivo .scsscon la ayuda de Browser Sync.

Recarga en vivo con Browser Sync

Browser Sync ayuda a hacer más fácil el desarrollo web haciendo girar un servidor web que nos ayuda a hacer la recarga en vivo fácilmente. Tiene otras características, como la sincronización de acciones a través de múltiples dispositivos, también.

Primero tendremos que instalar Browser Sync:

$ npm install browser-sync --save-dev

Habrás notado que no hay un prefijo gulp- cuando instalamos Browser Sync. Esto se debe a que Browser Sync funciona con Gulp, por lo que no tenemos que utilizar un plugin.

Para usar Browser Sync, tendremos que require Browser Sync.

var browserSync = require('browser-sync').create();

Necesitamos crear una tarea browserSync para que Gulp pueda girar un servidor usando Browser Sync. Dado que estamos ejecutando un servidor, tenemos que dejar que Browser Sync sepa dónde debe estar la raíz del servidor. En nuestro caso, es la carpeta `app`:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

También tenemos que cambiar nuestra tarea sass ligeramente para que Browser Sync pueda inyectar nuevos estilos CSS (actualizar el CSS) en el navegador cada vez que se ejecute la tarea sass.

Hemos terminado de configurar Browser Sync. Ahora, tenemos que ejecutar las tareas watch y browserSync al mismo tiempo para que se produzca la recarga en vivo.

Será engorroso abrir dos ventanas de línea de comandos y ejecutar gulp browserSync y gulp watch por separado, así que vamos a hacer que Gulp las ejecute juntas diciéndole a la tarea watch que browserSync debe completarse antes de que watch pueda ejecutarse.

Podemos hacerlo añadiendo un segundo argumento a la tarea watch. La sintaxis es:

gulp.task('watch', , function (){ // ...})

Y en este caso vamos a añadir la tarea browserSync.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

También querremos asegurarnos de que sass se ejecuta antes que watch para que el CSS ya sea el más reciente cada vez que ejecutemos un comando Gulp.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Ahora, si ejecutamos gulp watch en la línea de comandos, Gulp debería iniciar las tareas sass y browserSync simultáneamente. Cuando ambas tareas se completen, watch se ejecutará.

Al mismo tiempo, una ventana del navegador que apunta a app/index.html también aparecerá. Si cambias el archivo styles.scss, verás que el navegador se recarga automáticamente.

Hay una cosa más antes de terminar esta sección de recarga en vivo. Ya que estamos pendientes de la recarga de los archivos .scss, ¿por qué no ir un paso más allá y recargar el navegador si se guarda algún archivo HTML o JavaScript?

Podemos hacerlo añadiendo dos procesos de vigilancia más, y llamando a la función browserSync.reload cuando se guarda un archivo:

Hasta ahora en este tutorial nos hemos ocupado de tres cosas:

1. Hacer funcionar un servidor web para el desarrollo
2. Usar el preprocesador Sass
3. Recargar el navegador cada vez que se guarda un archivo

Cubramos la parte de optimización de activos en la siguiente sección. Empezaremos con la optimización de los archivos CSS y JavaScript.

Optimización de archivos CSS y JavaScript

Los desarrolladores tenemos dos tareas que realizar cuando intentamos optimizar los archivos CSS y JavaScript para producción: la minificación y la concatenación.

Un problema al que se enfrentan los desarrolladores al automatizar este proceso es que es difícil concatenar sus scripts en el orden correcto.

Digamos que hemos incluido 3 etiquetas de script en index.html.

Estos scripts se encuentran en dos directorios diferentes. Será difícil concatenarlos con plugins tradicionales como gulp-concatenate.

Por suerte, hay un útil plugin de Gulp, gulp-useref que resuelve este problema.

Gulp-useref concatena cualquier número de archivos CSS y JavaScript en un único archivo buscando un comentario que empiece por «<!-build:» y termine por «<!-endbuild->». Su sintaxis es:

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> puede ser js, css, o remove. Es mejor establecer type al tipo de archivo que está tratando de concatenar. Si establece type a remove, Gulp eliminará todo el bloque de construcción sin generar un archivo.

<path> aquí se refiere a la ruta de destino del archivo generado.

Querremos que el archivo JavaScript final se genere en la carpeta js, como main.min.js. Por lo tanto, el marcado sería:

Ahora vamos a configurar el plugin gulp-useref en el gulpfile. Tendremos que instalar el plugin y requerirlo en el gulpfile.

$ npm install gulp-useref --save-dev

var useref = require('gulp-useref');

Configurar la tarea useref es similar a las otras tareas que hemos hecho hasta ahora. Este es el código:

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Ahora si ejecutas esta tarea useref, Gulp tomará recorrido por las 3 etiquetas de script y las concatenará en dist/js/main.min.js.

El archivo, sin embargo, no está minificado ahora mismo. Tendremos que utilizar el plugin gulp-uglify para ayudar a minificar los archivos JavaScript. También necesitamos un segundo plugin llamado gulp-if para asegurar que sólo intentamos minificar los archivos JavaScript.

$ npm install gulp-uglify --save-dev 

Gulp debería ahora minificar automáticamente el archivo `main.min.js` cada vez que ejecute la tarea useref.

Una cosa interesante que todavía tengo que revelar con Gulp-useref es que cambia automáticamente todos los scripts dentro de «<!-build:» y «<!-endbuild->» en un solo archivo JavaScript que apunta a `js/main.min.js`.

Maravilloso, ¿verdad?

Podemos utilizar el mismo método para concatenar cualquier archivo CSS (si has decidido añadir más de uno) también. Seguiremos el mismo proceso y añadiremos un comentario build.

También podemos minificar el archivo CSS concatenado. Necesitamos usar un paquete llamado gulp-cssnano plugin para ayudarnos con la minificación.

$ npm install gulp-cssnano

Ahora obtendrás un archivo CSS optimizado y un archivo JavaScript optimizado cada vez que ejecutes la tarea useref.

Seguimos con la optimización de imágenes.

Optimización de imágenes

Probablemente ya lo has adivinado; necesitamos usar gulp-imagemin para ayudarnos con la optimización de imágenes.

$ npm install gulp-imagemin --save-dev

var imagemin = require('gulp-imagemin');

Podemos minificar png, jpg, gif e incluso svg con la ayuda de gulp-imagemin. Vamos a crear una tarea images para este proceso de optimización.

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Dado que los diferentes tipos de archivos pueden ser optimizados de manera diferente, es posible que desee agregar opciones a imagemin para personalizar cómo se optimiza cada archivo.

Por ejemplo, puede crear GIFs entrelazados ajustando la tecla de opción interlaced a true.

También puede jugar con otras opciones si lo desea.

La optimización de imágenes, sin embargo, es un proceso extremadamente lento que no querrás repetir a menos que sea necesario. Para ello, podemos utilizar el plugin gulp-cache.

$ npm install gulp-cache --save-dev

Ya casi hemos terminado con el proceso de optimización. Hay una carpeta más que necesitamos transferir del directorio `app` al directorio `dist`, el de las fuentes. Vamos a hacer eso ahora.

Copiando fuentes a Dist

Dado que los archivos de fuentes ya están optimizados, no hay nada más que tengamos que hacer. Todo lo que tenemos que hacer es copiar las fuentes en dist.

Podemos copiar archivos con Gulp simplemente especificando el gulp.src y gulp.dest sin ningún tipo de plugins.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Ahora Gulp copiará `fonts` de `app` a `dist` cada vez que ejecute gulp fonts.

Ahora tenemos 6 tareas diferentes en el gulpfile, y cada una de ellas tiene que ser llamada individualmente con la línea de comandos, lo que es un poco engorroso por lo que queremos unir todo en un solo comando.

Pero antes de hacerlo, vamos a ver cómo limpiar los archivos generados automáticamente.

Limpiar los archivos generados automáticamente

Dado que estamos generando archivos automáticamente, querremos asegurarnos de que los archivos que ya no se usan no se queden en ningún sitio sin que lo sepamos.

Este proceso se llama limpieza (o en términos más sencillos, borrar archivos).

Tendremos que usar del para ayudarnos con la limpieza.

npm install del --save-dev

var del = require('del');

La función del toma un array de globos de nodos que le indica qué carpetas debe borrar.

Configurarlo con una tarea Gulp es casi como el primer ejemplo de «hola» que tuvimos.

gulp.task('clean:dist', function() { return del.sync('dist');})

Ahora Gulp borrará la carpeta `dist` por ti cada vez que se ejecute gulp clean:dist.

Nota: No tenemos que preocuparnos de borrar la carpeta dist/images porque gulp-cache ya ha almacenado las cachés de las imágenes en su sistema local.

Para borrar las cachés de tu sistema local, puedes crear una tarea independiente que se llame `cache:clear`

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Phew, eso es un bocado. ¡Combinemos ahora todas nuestras tareas juntas!

Combinando tareas Gulp

Resumamos lo que hemos hecho. Hasta ahora, hemos creado dos conjuntos distintos de tareas Gulp.

El primer conjunto es para un proceso de desarrollo, donde compilamos Sass a CSS, observamos los cambios y recargamos el navegador en consecuencia.

El segundo conjunto es para un proceso de optimización, donde preparamos todos los archivos para el sitio web de producción. Optimizamos activos como CSS, JavaScript e imágenes en este proceso y copiamos las fuentes de app a dist.

Ya hemos agrupado el primer conjunto de tareas en un flujo de trabajo sencillo con el comando gulp watch:

gulp.task('watch', , function (){ // ... watchers})

El segundo conjunto consiste en las tareas que necesitamos ejecutar para crear el sitio web de producción. Esto incluye clean:dist, sass, useref, images y fonts.

Si siguiéramos la misma línea de pensamiento, podríamos crear una tarea build para combinar todo junto.

gulp.task('build', , function (){ console.log('Building files');})

Desgraciadamente, no podríamos escribir la tarea build de esta manera porque Gulp activa todas las tareas en el segundo argumento simultáneamente.

Existe la posibilidad de que useref, images o incluso fonts se completen antes que clean, lo que significa que toda la carpeta `dist` se elimina.

Por lo tanto, para asegurar que las limpiezas se completen antes que el resto de las tareas, necesitamos usar un plugin extra llamado Run Sequence.

$ npm install run-sequence --save-dev

Aquí está la sintaxis de una secuencia de tareas con run sequence:

Cuando se llame a task-name, Gulp ejecutará primero task-one. Cuando task-one termine, Gulp iniciará automáticamente task-two. Finalmente, cuando task-two se complete, Gulp ejecutará task-three.

La secuencia de ejecución también le permite ejecutar tareas simultáneamente si las coloca en una matriz:

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

En este caso, Gulp ejecuta primero task-one. Cuando task-one se completa, Gulp ejecuta todas las tareas del segundo argumento simultáneamente. Todas las tareas de este segundo argumento deben completarse antes de que se ejecute task-three.

Así que ahora podemos crear una tarea que asegure que clean:dist se ejecute primero, seguida de todas las demás tareas:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Para hacer las cosas consistentes, también podemos construir la misma secuencia con el primer grupo. Utilicemos esta vez default como nombre de la tarea:

gulp.task('default', function (callback) { runSequence(, callback )})

¿Por qué default? Porque cuando tienes una tarea llamada default, puedes ejecutarla simplemente escribiendo el comando gulp, lo que ahorra algunas pulsaciones.

Por último, ¡aquí tienes un repo de github para todo el trabajo que hemos hecho!

Resumiendo

Hemos pasado por los fundamentos absolutos de Gulp y hemos creado un flujo de trabajo que es capaz de compilar Sass en CSS mientras vigila los archivos HTML y JS para los cambios al mismo tiempo. Podemos ejecutar esta tarea con el comando gulp en la línea de comandos.

También hemos construido una segunda tarea, build, que crea una carpeta dist para el sitio web de producción. Compilamos Sass en CSS, optimizamos todos nuestros activos y copiamos las carpetas necesarias en la carpeta dist. Para ejecutar esta tarea, sólo tenemos que escribir gulp build en la línea de comandos.

Por último, tenemos una tarea clean que borra de la carpeta dist generada cualquier caché de imágenes que se cree, permitiéndonos eliminar cualquier archivo antiguo que se haya guardado inadvertidamente en dist.

Hemos creado un flujo de trabajo robusto hasta ahora que es lo suficientemente capaz para la mayoría de los desarrolladores web. Hay mucho más a Gulp y flujos de trabajo que podemos explorar para hacer este proceso aún mejor. Aquí hay algunas ideas para usted:

Para el desarrollo:

• Usar Autoprefixer para escribir código CSS sin proveedores
• Añadir mapas de fuentes para facilitar la depuración
• Crear Sprites con sprity
• Compilar sólo los archivos que han cambiado con gulp-changed
• Escribir ES6 con Babel o Traceur
• Modularizar archivos Javascript con Browserify, webpack, o jspm
• Modularizando HTML con motores de plantillas como Handlebars o Swig
• Dividiendo el gulpfile en archivos más pequeños con require-dir
• Generando un script Modernizr automáticamente con gulp-modernizr

Para la optimización:

• Eliminando el CSS no utilizado con unCSS
• Optimizando aún más el CSS con CSSO
• Generando CSS en línea para el rendimiento con Critical

Además de los procesos de desarrollo u optimización, también puedes añadir escribir pruebas unitarias de JavaScript con gulp-jasmine e incluso desplegar tu carpeta dist en tu servidor de producción automáticamente con gulp-rync.

Como puedes ver, aunque el flujo de trabajo que hemos creado hace bastantes cosas, se pueden hacer muchas más. Crear un flujo de trabajo que se adapte a tus necesidades puede ser extremadamente emocionante y satisfactorio, pero puede ser mucho para asimilar si eres nuevo en esto.

Hay mucho más en Gulp que es imposible de cubrir dentro de esta entrada del blog, o incluso una serie de entradas. Es por eso que escribí un libro sobre la automatización de su flujo de trabajo, y te invito a tomar diez capítulos de forma gratuita si usted está interesado en saber más 🙂