Using Babel with Gulp

I recently had to revisit some builds in my recent projects and I thought I'd throw together a quick reference on how to use Babel with gulp. This article will cover how to use Babel to process ES2015 in our application and allow us to write our gulpfile in ES2015.

Installing Dependencies

First we need to install the various dependencies that we'll need to make this happen. You'll need to include a few libraries: gulp, browserify, vinyl-source-stream, vinyl-buffer, babelify, and babel-preset-env. Let's install and save these to our devDependencies by running the following command:

npm install --save-dev gulp browserify vinyl-source-stream vinyl-buffer babelify babel-preset-env

Creating The Gulpfile

In your project root, create a file named gulpfile.js and include the modules we just installed. We will write this in ES2015 for now, to further illustrate the differences when we modify it to use ES2015 in the next section.

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');

Finally, we can create our js task. This will use Babel to process any ES6 in our application code.

gulp.task('js', function () {
    return browserify('src/main.js')
        .transform('babelify', {
            presets: ['env']
        })
        .bundle()
        .pipe(source('app.js')) // Converts To Vinyl Stream
        .pipe(buffer()) // Converts Vinyl Stream To Vinyl Buffer
        // Gulp Plugins Here!
        .pipe(gulp.dest('dist');
});

Let's take a moment and quickly break this down.

1. First, we pass our source file into browserify. This will replace the call to gulp.src() that you may be used to writting. The difference here is that this will return a readable stream instead of a stream of vinyl files. More on that in step 4!
2. Second, we use babelify to apply a transform on our browserify process. As the second argument, we will pass in an array of presets. In this case - we will be using a single env preset, which will automatically determine the plugins and polyfills we need to use the latest JavaScript features.
3. The .bundle() call will then bundle all of our files and their dependencies into a single file.
4. On this step, we begin piping the data into our various gulp plugins. For this step, we are going to convert the readable stream into a stream of vinyl files which is the virtual file format that gulp uses. Unlike other gulpfiles you may have written, we w Pass file into vinyl-source-stream which will convert the readable stream into a stream of vinyl files, which is what gulp is expecting to receive.
5. Convert the stream of vinyl files to use buffers. Since some plugins expect the data to be buffered, we need to buffer the data so we can pipe it into gulp plugins on the next step.
6. Once we have files buffered, we can now pipe in all of the gulp plugins as usual.
7. Finally, we output the processed file. You can now write your application code using ES2015!

Writing Gulpfiles In ES2015

Now that we can write our project code using Babel, lets update our gulpfile so that we can also write it using ES2015.

Since we have already installed the Babel dependencies above, we wouldn't need to do so again. But, in case you're in a situation where you haven't installed the dependencies yet - you'll need to install babel-core and babel-preset-env.

npm install --save-dev babel-core babel-preset-env

Next, we need to create a new .babelrc file the root of our project directory. In that file, we need to create a small JSON object and list our preset that we have installed.

{
    "presets": ["env"]
}

Finally, rename gulpfile.js to gulpfile.babel.js, and you're all set. We can now update our gulpfile with ES2015 features that we were previously unable to use. Here's a quick example of the gulpfile using ES2015 features.

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

gulp.task('js', () => {
    return browserify('src/main.js')
        .transform('babelify', {presets: ['env']})
        .bundle()
        .pipe(source('app.js')) // Readable Stream -> Stream Of Vinyl Files
        .pipe(buffer()) // Vinyl Files -> Buffered Vinyl Files
        // Pipe Gulp Plugins Here
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', () => {
    gulp.watch('src/**/*.js', gulp.series('js'));
});

gulp.task('default', gulp.series('js', 'watch'));

You can now run gulp the same way that you are used to, and now it will automatically run the code through Babel before executing.