Iniciando con Gulp

Ivan Martil

Llevo bastante tiempo trabajando con sass y como resultado incorporé a mi flujo de trabajo herramientas como mixture. Nunca me gusto trabajar directamente con el terminal, pero la desaparición del equipo de mixture me lleva a enfrentarme con los automatizadores de tareas.

Gulp no es más que eso, un automatizador de tareas. Un programa al cual le enseñamos unas tareas y él solito se encarga de realizarlas por nosotros. Hasta ahora era mixture quien me refrescaba el navegador automáticamente, compilaba los archivos scss e incluso generaba el sourcemap para facilitarme el trabajo.

En una serie de artículos quiero ir avanzando hacia el abandono de mixture en favor de gulp y crear las tareas necesarias en este último para que mi flujo de trabajo vuelva a ser simple y rápido. Vamos allá !!

En primer lugar instalamos node.js. Desde la página web podemos descargar el instalador tanto en Windows como en Mac. Una vez instalado node nos aseguramos que todo esta ok ejecutando en nuestro terminal:


node -v
npm -v

Esto nos mostrará las versiones instaladas. Para el uso de gulp no hace falta saber mucho más de node.js tan solo lo utilizaremos para la instalación de paquetes con npm.
Npm es un gestor de paquetes tremendamente útil para descargar librerías o plugins a nuestro proyecto. En la web podemos encontrar un sinfín de paquetes listos para instalar. Y una estupenda documentación para extender nuestros conocimientos sobre el mismo.
Para instalar un paquete utilizamos el comando:


npm install nombre_paquete

Si queremos instalar el paquete en el sistema (como veremos en el caso de gulp) basta con añadir –g al comando.


npm install –g nombre_paquete

Instalando Gulp

Abrimos el terminal e instalamos gulp de forma global.


npm install –g gulp

Así de simple. Ya tenemos gulp en nuestro sistema. Con el objetivo de facilitar la comprensión del artículo generaré una estructura de carpetas que iré respetando.
Creamos una carpeta con nombre “migulp” y dentro un archivo con nombre gulpfile.js. La estructura queda de esta manera:

    • migulp
      • src
        • scss
        • img
        • index.html
      • gulpfile.js

El archivo gulpfile.js es el contenedor de tareas de gulp. Todas las tareas que queramos pedirle las escribiremos en este archivo.
Accedemos a la carpeta migulp mediante el terminal y ejecutamos npm mediante el comando:


npm init

Con ello generamos un archivo package.json donde guardamos la información sobre el proyecto y sus dependencias. Desde el mismo terminal se nos irá preguntando por el nombre, versión, descripción, autor… Para nuestra primera prueba podemos presionar enter en todas las preguntas.
Ahora podemos instalar gulp en nuestro proyecto (antes lo hicimos en el sistema)


npm install gulp --save-dev

Con la extensión “–save-dev” hacemos que gulp se incluya como dependencia de nuestro proyecto en package.json. Si abrimos ahora nuestro archivo pakage.json veremos algo como esto:


{
  "name": "migulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

Gulp es ahora una dependencia. Y en nuestro proyecto aparecerá una nueva carpeta llamada node_modules donde se descargarán todos los plugins que vayamos añadiendo.
Bien, ya tenemos un proyecto con gulp instalado. Si ahora ejecutamos


gulp -v

Veremos cómo tenemos dos versiones de gulp instaladas CLI versión (gulp en sistema) y Local versión (la propia de nuestro proyecto). Todo ok. Pero si llamamos a gulp desde el terminal


gulp

Recibimos el mensaje en terminal que no tenemos ninguna tarea definida en el archivo gulpfile.js. Empecemos asignando tareas.

Tarea Sass

Lo primero es instalar un plugin para compilar sass. En nuestro caso será gulp-sass (recordar utilizar –save-dev para generar la dependencia)


npm install gulp-sass –save-dev

Abrimos nuestro archivo gulpfile.js y escribimos lo siguiente:


var gulp = require('gulp');
var sass = require('gulp-sass');
//tareas
var input="src/scss/*.scss";
var output="dist/css";

gulp.task('sass', function(){
  return gulp
  .src(input)
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest(output))
});

En la primera línea cargamos gulp en la variable gulp, esto lo debemos hacer con cada plugin que instalemos. En el ejemplo tenemos el plugin de sass cargado en la variable sass. Si tuviéramos instalado el plugin uglify deberíamos tener algo así:


var gulp = require (‘gulp’);
var sass = require('gulp-sass');
var uglify = require(‘gulp-uglify’); 

Con las variables input y output indicamos las rutas donde se encuentran nuestros archivos sass y donde queremos nuestros archivos css respectivamente. En la variable input podemos ver un * en la ruta. El método src recibe como parámetro la ruta y esta puede ser a un archivo o a varios por medio de los llamados globs. Los globs no són más que patrones para indicar la ubicación de los archivos. Algunos ejemplos:

  • src/scss/style.scss– Es el caso más simple. Incluye simplemente el archivo style.scss.
  • src/scss/*.scss– En este caso el asterisco nos sirve para que incluya cualquier archivo con extensión .scss dentro de la carpeta scss.
  • src/**/*.scss– Si empleamos el doble asterisco conseguimos incluir cualquier subdirectorio. Es decir, buscará dentro de todas las carpetas del directorio cualquier archivo con la extensión scss.
  • src/*.+(js|scss)– En este caso logramos incluir cualquier archivo con la extensión .js o .scss dentro del directorio src

gulp.task pasamos dos parámetros. El nombre de la tarea (sass) y la función con la tarea en sí.
Con gulp.src obtendremos todos los archivos del directorio indicado. En este caso en la variable input le ponemos la ruta de todos los archivos con extensión .scss que haya en el directorio.
gulp.pipe encadena tareas. Pasándole el parámetro sass le decimos que nos envie el archivo indicado al plugin de sass.Este será el responsable de leer cada archivo y pasarlo a css. En nuestro caso hemos añadido el método .on con el parametro ‘error’. Esta función es propia del plugin de sass y nos informará si hay algún error durante el proceso.
Con la última línea de nuestro código .pipe(gulp.dest(output)) encadenamos la tarea para que el resultado del plugin sass nos lo envíe al destino escogido.
Una vez explicado y comprendido el código ya podemos llamar a nuestra tarea desde el terminal.


gulp sass

Con este sencillo comando gulp ejecuta la tarea con dicho nombre.
Ahora bien, es bastante tedioso tener que estar ejecutando gulp sass cada vez que realizamos un cambio en nuestros archivos. Veamos como solucionar este asunto con watch.

Watch

Con watch tenemos una de las tareas más interesantes que no requieren de ningún plugin extra. Con ella podemos generar una serie de acciones cada vez que creamos o modificamos un archivo.
Para ver todo su potencial combinemos su uso con el plugin de sass.
Abrimos nuestro archivo gulpfile.js y escribimos una nueva tarea:


gulp.task('watch', function() {
  return gulp
    .watch(input, ['sass'])
    .on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

Como hemos comentado antes, en esta ocasión no hace falta la instalación de ningún plugin. Watch está integrado en gulp y nos facilita enormemente las tareas.
En la tarea volvemos a pasar dos parámetros. El nombre de la tarea y la función donde se declaran las acciones. Con:


.watch(input,[‘sass’]) 

informamos a gulp de donde están los archivos que debe vigilar en busca de cambios (Recordar que input es la variable que habíamos definido anteriormente con la ruta del archivo sass). Cuando detecte un cambio ejecutará la tarea sass.


    .on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', tarea ejecutando...');
    });

Le decimos a gulp que cuando detecte un cambio (change) nos avise por consola pasándonos la ruta del archivo actualizado y el mensaje “tarea ejecutando” o el que quisiéramos poner.
Ahora simplemente debemos poner en el terminal


gulp watch

Con esto gulp estará vigilando el archivo sass y se ejecutarán los cambios de manera ¡automática!. Si queremos dejar de ejecutar watch tan solo debemos presionar control+c en el terminal.
El potencial de gulp es increíble, superada la pereza inicial de configurar las tareas no dudo que me hará olvidar mixture en poco tiempo o almenos eso espero. Continuará…..

Comentarios 0

Nadie ha comentado nada aún. Te animas ha ser el primero!! ;)

Opina libremente

Tu dirección de correo electrónico no será publicada.Todos los campos son obligatorios.