Gulp and Browserify - Initial Setup

Shane Osbourne
InstructorShane Osbourne
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

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.

[00:01] 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.

[00:37] 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.

[01:27] 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.

[02:05] 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.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today