Gulp y javascript

Ivan Martil

Hemos configurado un entorno de desarrollo en gulp y creado tareas para mejorar nuestro trabajo en css. Pero nos falta otro elemento indispensable para el frontend,  javascript.

El objetivo es crear una tarea para revisar, concatenar y minificar nuestro código. Para ello vamos a utilizar los plugins gulp-jshintgulp-uglify y gulp-concat.

La Instalación

Como es habitual en gulp lo primero es abrir nuestro terminal e instalar los plugins que vayamos a utilizar


npm install --save-dev jshint gulp-jshint 
npm install --save-dev gulp-concat 
npm install --save-dev gulp-uglify 

Creamos las dependencias en nuestro gulpfile.js


var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

( Si todo esto de npm install y dependencias no te suena ni de lejos mejor no sigas leyendo y empieza por aquí).

Antes de crear la tarea vemos nuestra estructura de carpetas (ver imagen 1). Nuestro código javascript en desarrollo está dentro de src/js.

estructura de carpetas
imagen 1

Para el ejemplo creo tres archivos .js con el siguiente código:


/*src/js/script1.js*/
console.log('uno');

/*src/js/script2.js*/
console.log('dos');

/*src/js/script3.js*/
console.log('tres');

La tarea

Nuestra tarea tiene que realizar tres acciones. Revisar el código, concatenar los archivos y comprimirlos. Todo ello mientras nos informa de los resultados. En esta ocasión me resulta más útil crear dos tareas. Una para revisar el código y otra para concatenar y minificar cuando todo esté correcto. De este modo tengo más libertad de ejecutar solo aquello que necesito en cada momento.


var inputJs = [
  './src/js/script1.js',
  './src/js/script2.js',
  './src/js/script3.js'
];
var outputJs = "./dist/js";

gulp.task('revisaJs', function(){
  return gulp
    .src(inputJs)
    .pipe(jshint())
    .pipe(notify(function (file) {
      if (file.jshint.success) {
        return false;
      }
      var errors = file.jshint.results.map(function (data) {
        if (data.error) {
          return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason;
        }
      }).join("\n");
      return file.relative + " (" + file.jshint.results.length + " errors)\n" + errors;
    }));
});

En primer lugar creo la tarea revisaJs donde utilizamos el plugin jshint para verificar nuestro código js.

La ubicación de los archivos la añado en variables para facilitar las modificaciones entre proyectos (inputJs y outputJs). Podemos configurar jshint a nuestro antojo ojeando un poco la documentación. Pero es en su combinación con notify donde me resulta más útil. (Ya habíamos hablado sobre el plugin notify en anteriores artículos).En mi caso he copiado tal cual la tarea que nos muestra notify para combinar los resultados de jshint y las notificaciones. Ejecutando la tarea no solo revisamos el código, sino que recibimos alertas de cuál es el error y dónde se produce. Tal y como tenemos estructurada la tarea recibiremos notificaciones solo cuando el código no supere la verificación.
Con nuestra tarea de verificación lista veamos la siguiente acción, concatenar los archivos. Es muy probable que en nuestro proyecto tengamos más de un archivo javascript. Si solo minificamos reducimos el peso pero tenemos que hacer múltiples peticiones al servidor, penalizando así el rendimiento. Para reducir este número de peticiones es importante concatenar los archivos (unirlos).
Con gulp-concat agruparemos nuestros archivos y con gulp-ugify los minificamos.


gulp.task('optimizaJs', function(){
  return gulp
    .src(inputJs)
    .pipe(sourcemaps.init())
    .pipe(concat('script_all.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest(outputJs))
    .pipe(notify({
         title: 'optimizaJs',
         message: 'Js concatenado y minificado' 
    })); 
});

En la tarea hacemos uso del plugin sourcemaps que vimos en nuestro artículo sobre gulp y css, con el  objetivo de facilitar el desarrollo y establecer una comunicación con los archivos de origen.
El funcionamiento de optimizaJs es bien simple, ubicamos los archivos de origen .src(inputJs)   se los pasamos a concat con el nombre del archivo resultante .pipe(concat('script_all.min.js')) , lo pasamos por uglify para la minificación .pipe(uglify()) y le mostramos dónde ubicarlo .pipe(gulp.dest(outputJs)) . Finalizamos la tarea con la notificación por pantalla informando del exito de la misma.

En  uglify podríamos pasar diferentes opciones para personalizar la salida. Por defecto viene configurado para ofrecer la mejor compresión posible y en mi caso es justo el objetivo.

Existen multitud de plugins y configuraciones posibles en gulp. Seguro que iré descubriendo nuevas herramientas y espero compartirlas para aprender durante el proceso.

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.