egghead-logo-white
Learn to Code
Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
10s
25s
Download in HD
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Gulp and Browserify - Initial Setup

    Shane OsbourneShane Osbourne
    browserifyBrowserify
    gulpGulp
    javascriptJavaScript

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss