Usando ECMAScript 6 en tus tareas de Gulp

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"]);

<center> <small> <small> Tareas de Gulp para ejecutar ESLint y Browserify + Babelify cada vez que cambia un archivo </small> </small> </center>

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.