Gulp: Separa tus tareas en diferentes archivos

Desde hace tiempo los build tools (herramientas de construcción) son menester en el stack de todo Front end, siendo Gulp el que goza actualmente de mayor popularidad. En general la funcion de todas estas herramientas es crear pequeñas instrucciones que se encarga de agilizar las tareas de optimización sobre tu código.

El dolor de cabeza empieza cuando el proyecto crece y tienes cada vez mas tareas en un solo archivo, la mejor solución a este problema es modularizar cada una de las tareas en un archivo independiente.

Crearemos un proyecto sencillo utilizando utilizando browserify y sass, el código estará disponible en el repositorio de github.

Requerimientos

Lo primero que necesitamos es nodejs, la ultima versión estará bien.
Ahora, creamos una carpeta para el proyecto, en consola nos ubicamos y escribimos:

npm init

Esto creará un nuevo proyecto npm.

A continuación instalaremos las dependencias:

npm install gulp --save
npm install gulp gulp-browserify gulp-sass require-dir --save

Estructura

Luego, crearemos la estructura de nuestro proyecto:

app/
build/
gulp/
---- tasks/
-------- styles.js
-------- scripts.js
-------- html.js
---- envs/
-------- production.js
node_modules/
gulpfile.js
  • app archivos de desarrollo de nuestra app.
  • build código listo para producción.
  • gulp/tasks todas las tareas.
  • gulp/envs los entornos o tareas generales.

El archivo gulpfile.js

El archivo gulpfile.js es el punto de partida, quedará así:

var requireDir = require('require-dir');
requireDir('./gulp', { recurse: true });

La segunda linea requerirá todas las tareas para tenerlas siempre disponibles.

Las tareas

gulp/tasks/html.js

var gulp = require('gulp');
gulp.task('html', function () {
    return gulp.src('./app/index.html')
        .pipe(gulp.dest('./build/'));
});

Copiará nuestro index a la carpeta build.

gulp/tasks/scripts.js

var gulp        = require('gulp');
var browserify  = require('gulp-browserify');
gulp.task('scripts', function() {
    return gulp.src('./app/js/main.js')
        .pipe(browserify())
        .pipe(gulp.dest('./build/js'));
});

Como estamos utilizando browserify, convertiremos a javascript valido y luego copiaremos a build.

gulp/tasks/styles.js

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

gulp.task('styles', function () {
    return gulp.src('./app/css/main.sass')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./build/css/'));
});

Ya que son archivos sass, los convertiremos a css y luego los copiaremos a build.

Los entornos

Para el ejemplo colocaremos solo el entorno de producción.

gulp/tasks/envs/production.js

var gulp = require('gulp');
gulp.task('production', ['scripts', 'styles', 'html']);

Esta tarea se encargará de llamar las subtareas de scripts, styles y html.

Los archivos de nuestra app

Agregaremos un par de archivos de prueba

app/index.html

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Gulp modular example</title>
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
        Gulp modular example
        <script src="js/main.js"></script> 
    </body>
</html>

app/css/main.sass

html, body
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    font-family: sans-serif
    letter-spacing: 0.01em

app/js/main.js

console.log('is working');

Probando el proyecto

En consola, nos ubicamos en la carpeta del proyecto y escribimos:

gulp production

Esta linea ejecutará la tarea de producción y copiará el código a la carpeta build, la consola arrojará un resultado similar a esto:

[10:51:38] Starting 'scripts'...
[10:51:38] Starting 'styles'...
[10:51:38] Starting 'html'...
[10:51:39] Finished 'html' after 89 ms
[10:51:39] Finished 'styles' after 161 ms
[10:51:39] Finished 'scripts' after 205 ms
[10:51:39] Starting 'production'...
[10:51:39] Finished 'production' after 85 μs

Eso es todo!

Es una muy buena práctica modularizar las tareas de tu aplicación para facilitar la escalabilidad, esta técnica también puede ser aplicada en Grunt y otras build tools. Como se mencionó antes el código de este ejemplo lo puedes encontrar en este repositorio de github.

Cuéntame si fue de utilidad para ti, o ¿Cómo organizas tu tus tareas?, conversemos acá abajo :)