Gulp and Browserify - Initial Setup
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.