TÓMATELA CON CALMA… Y GULP

< script src=»my own» title=»tomatela con calma y gulp» >

Para nadie es un secreto que comenzar desde cero con un proyecto web en Node.js, por muy sencillo que parezca, termina a largo plazo complicándose, bien sea porque no existe un flujo de trabajo adecuado, porque no se conocen herramientas que permitan automatizar un poco el trabajo o bien recibimos un código ya hecho con documentación igual a menos cero y un cliente había pedido una demostración para ayer…

Ehm, pues, bueno… ^^’

¿Entonces, qué puedo hacer?

Gulp es una herramienta de automatización de tareas que en gran medida resuelve varios de los inconvenientes que normalmente se presentan especialmente con los archivos Javascript, CSS y HTML estáticos (a.k.a. assets) en un proyecto web:

  • Previsualización automática de cambios en assets.
  • Minificación de assets (reducir el tamaño de un archivo, aumenta la velocidad del request que se utiliza para incluirlo).
  • Concatenación de archivos (para minimizar el número de requests).
  • Cacheado avanzado de assets.
  • Compilado de CSS dinámicos (SASS, LESS y otros).
  • Generación (tipo boilerplate) de sitios web estáticos.
  • Renderizado y pre-renderizado de templates (usando HAML, Jade u otros).
  • Generación de data de pruebas mediante mock-objects.
  • Compila Javascript ES6 a Javascript ES5.
  • Compresión y descompresión automática de imágenes.
  • Automatizar tareas de testing (en desarrollos TDD).
  • Generación automática de documentación de código.
  • Conversión de archivos Markdown a HTML (para blogs estáticos, por ejemplo).
  • Y mucho, mucho más…

Si, todo eso lo hace Gulp 💡

Si leíste el anuncio con voz de informercial pues bien por ti o_O . Pero si, en general es un problema el hecho de que tengamos tantos archivos en una aplicación o página, mucho más si nos la dejaron legada así que…

Para esta demostración, solo instalaré cuatro plugins, que ilustrarán como Gulp puede resolver tres tareas importantes en el flujo de trabajo:

  1. Minificación y compresión de archivos Javascript.
  2. Concatenación de archivos CSS y JS.
  3. Previsualización automática de cambios en assets.

Lo primero que haremos será instalar Gulp en la raíz de nuestro proyecto. En este caso, usaré un layout de una página web estática gratuito y con muchos assets:

$ npm install gulp --save

Luego instalamos los plugins que necesitamos:

  • gulp-uglify hará la mayor parte del trabajo, minificará los archivos que le indiquemos.
  • gulp-concat concatenará los archivos Javascript que le indiquemos, generando uno solo.
  • gulp-css hará lo mismo que gulp-concat pero con los archivos CSS.
  • gulp-watch observará los cambios que se hagan en los archivos que le indiquemos.
$ npm install gulp-uglify gulp-concat gulp-css gulp-watch --save

A continuación, en la raíz de nuestro proyecto, creamos un archivo llamado gulpfile.js, y colocamos las tareas como deseamos ejecutarlas:

var gulp = require('gulp'),
  uglify = require('gulp-uglify'),
  concat = require('gulp-concat'),
  cssmin = require('gulp-css');

// Minificamos los archivos CSS
gulp.task('css', function() {
 gulp.src([
  './css/*.css',
 ])
 .pipe(concat('all.min.css'))
 .pipe(cssmin())
 .pipe(gulp.dest('./css'));
});

// Minificamos los archivos JS
gulp.task('scripts', function () {
 gulp.src([
  './js/*.js'
 ])
 .pipe(concat('all.min.js'))
 .pipe(uglify())
 .pipe(gulp.dest('./js'));
});

gulp.task('watch', function () {
  gulp.watch('./js/*.js', ['scripts']);
  gulp.watch('./css/*.css', ['css']);
});

gulp.task('default', ['css', 'scripts', 'watch']);

En la línea 7, definimos una tarea a ser automatizada, declarando que tenga como origen, los archivos que están en la ruta definida en la línea 9, seguidamente, usamos un flujo para llevar todos esos archivos a un único archivo por medio de concat() en la línea 11 y será minificado y escrito en la ruta declarada en la línea 13. El procedimiento es similar tanto para los archivos CSS como para los archivos Javascript.

Luego en las líneas 27 y 28 simultáneamente se observará cualquier cambio realizado a cualquier archivo dentro de la ruta declarada, y de existir un cambio, se ejecutará la(s) tarea(s) definida(s). Finalmente, en la línea 31, se declara como tarea por defecto, el orden de ejecución de las tareas declaradas en el archivo. Es importante definir el orden, en especial si se está usando gulp-watch, ya que este orden influirá en la observación de los cambios en los archivos.

Puedes declarar tantas tareas como desees, siempre que te sean útiles y te ayuden a acelerar el trabajo, ¡genial! XD . Ahora que tienes gran parte de tus tareas automatizadas… Tómatela con calma… 😉

</script>