Sergio Xalambrí

Usando ECMAScript 6 en tus tareas de Gulp

Originally published at medium.com

Algo muy molesto cuando estás usando ES6 con Babel.js y Gulp.js para automatizar tareas es que el archivo gulpfile.js sigue estando en ES5 y usando los módulos de CommonJS, aunque el resto de tu aplicación use ES6 y sus sistema de módulos.

Esto se acabo desde la última versión de Gulp.js. Al momento de actualizar nuestra instalación global y local de Gulp.js a la v3.9.0 ya nos es posible empezar a usar ES6 en nuestro gulpfile.js gracias a Babel.js.

Para hacer esto primero necesitamos tener la última versión de Gulp.js, para eso podemos usar el comando:

npm up -D gulp && sudo npm up -g gulp

Este comando va actualizar la versión de Gulp que tengamos instalada tanto de forma local como global. Luego de esto necesitamos asegurarnos de tener Babel.js en nuestro package.json:

npm i -D babel

Por último solo tenemos que renombrar nuestro archivo gulpfile.js a gulpfile.babel.js y listo, con solo esto ya podemos hacer algo como esto:

import babelify   from 'babelify';
import browserify from 'browserify';
import buffer     from 'vinyl-buffer';
import eslint     from 'gulp-eslint';
import gulp       from 'gulp';
import source     from 'vinyl-source-stream';
import uglify     from 'gulp-uglify';

const config = {
  browserify: {
    fileName: 'app.js',
    extensions: ['.js'],
    transform: [babelify]
  }
}

const paths = {
  src: {
    eslint: './src/es6/**/*.js',
    js    : './src/es6/app.js'
  },
  build: {
    js    : './build/js/'
  }
}

gulp.task('eslint', () => {
  return gulp
    .src(paths.src.eslint)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failOnError());
});

gulp.task('build:js', ['eslint'], () => {
  return browserify({
    entries: paths.src.js,
    debug: true,
    extensions: config.browserify.extensions,
    transform: config.browserify.transform
  }).bundle()
    .pipe(source(config.browserify.fileName))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest(paths.build.js))
});

gulp.task('watch', () => {
  gulp.watch([paths.src.eslint], ['build:js']);
});

gulp.task('build', ['build:js']);

gulp.task('default', ['build', 'watch']);
Tareas de Gulp para ejecutar ESLint y Browserify + Babelify cada vez que cambia un archivo

Ahora al momento de ejecutar Gulp este va a leer el archivo gulpfile.babel.js y va a ejecutar estas tareas usando Babel.js para transpilar el código en el momento.