Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Gulp and Browserify - Initial Setup

2:21 JavaScript lesson by

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this first video we look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

Let's look at combining gulp and Browserify so that we can combine these two files into a single package that can be loaded into a browser. First we need to NPM install Gulp, gulp-util, vinyl-source-stream, and Browserify. Now that those are installed, let start bringing them into our Gulp file. First of all we need the main Gulp package. We'll also use gulp-util, mainly for logging, then we'll go for vinyl-source-stream.

This is needed because we need to take the Browserify stream and transform it into a format that can be consumed by other Gulp plug-ins, and finally, Browserify itself. Next, we'll create a task called JS, and we need to call Browserify with our entry point which is app.js, app.js. Browserify has a bundle method which starts the compilation process. Should any errors occur in that process, we can listen to them and log them to the console using gulp-util.

If it were successful, however, we need to pipe the data that Browserify emits into vinyl-source-stream, and we give it a file name. At this point, all of the data emitted by the Browserify bundle has been buffered into a single in-memory file object called bundle.js, which means we can now pipe, just as we normally would, into gulp.dest, and pass along the destination directory. Gulp.dest will write bundle.js into this directory.

If we clear and run this task, we can see that along with some Browserify boilerplate, both of our modules have been included into the same file.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?