Lesson Weekend

Let's create a real task in our gulpfile to browserify our pingpong-interface.js file. This will finally allow us to run our pingpong app in the browser again! Remember, browserify will follow the require statement in our pingpong-interface.js file to pull in our back-end pingpong.js file, and then translate the code into something the browser will understand that does not use Node.js keywords like exports.

First, we'll need to get a new package called vinyl-source-stream using npm. Run the following command in the root level of your ping pong project directory:

$ npm install vinyl-source-stream --save-dev

Then, we'll include both the browserify package we downloaded in the Introducing Npm and Gulp lesson and the new vinyl-source-stream package at the top of our gulpfile. vinyl-source-stream is used for putting the browserified source code into a new file. Don't worry too much about the details beyond that.

gulpfile.js
//add these to your existing code
var browserify = require('browserify');
var source = require('vinyl-source-stream');

Now we'll add the task to call the browserify function, which is included in and exported from the browserify package, just as we exported our Calculator constructor function.

gulpfile.js
gulp.task('jsBrowserify', function() {
  return browserify({ entries: ['./js/pingpong-interface.js'] })
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build/js'));
});

This task is a chain of function calls.

  • First, we call the browserify function and instruct which files to browserify. This is done by passing in an object with a key entries. Its corresponding value is an array of file names. We tell it to pull in our front-end file only, not our back-end pingpong.js file because that was taken care of by the require keyword in our pingpong-interface.js file when we wrote var Calculator = require('./../js/pingpong.js').calculatorModule;.

  • Then, we call bundle(), which is built into the Browserify package. Don't worry about exactly what this does, just know it's part of the Browserify process for now.

  • Finally we tell it to create a new file called app.js, and to put it in a new folder, which we will name build. Then inside of there, we want to put app.js into another new folder, which we will name js.

It is untidy to keep our automatically generated production files in the same place as our development files. Instead we separate out our production version of the project inside its own folder called build. This folder will eventually hold other code, so we tell gulp to create a js folder inside of it to store our browserified JavaScript.

Now we can run our task with the command $ gulp jsBrowserify. This will generate the build folder, the same way the browserify command did in the terminal.

Now that our JavaScript is going into a build folder, into a new file js/app.js, we need to replace our old <script> tags with a new one to load our generated build/js/app.js file.

index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript" src="build/js/app.js"></script>
    <title>Ping Pong</title>
  </head>
  <body>
    <form id="ping-pong-form">
      <label for="goal">Enter a number:</label>
      <input id="goal" type="number">
      <button type="submit">Submit</button>
    </form>
    <ul id="solution"></ul>
  </body>
</html>

Hooray! Now we can run our calculator program in the browser again! Don't forget to run your gulp tasks every time your files change as you develop. Later, we'll see how to do this automatically.

Terminology


  • vinyl-source-stream: An npm package used for placing browserified source code into a new file.

Tips


  • It is untidy to keep automatically-generated production files in the same place as our development files. Instead, separate the production version of a project inside a build directory.