Building with Gulp.js

Today, any modern client-side application represents a mix of many concerns that are addressed individually by various technologies. Addressing each concern individually simplifies the overall process of managing the project's complexity. The downside of this approach is that at some point in your project, you need to put together all the individual parts into one coherent application. Just like the robots in an automotive factory that assemble cars from individual parts, developers have something called build-tools that assemble their projects from individual modules. This process is called the build process and, depending on the size and complexity of your project, it can take anywhere from milliseconds to hours to build.

The Node.js ecosystem has a great tool for automating our build process, Gulp.js. You can learn more about Gulp.js at http://gulpjs.com. Let's install it:

npm install --save-dev gulp

Once again, we need this module for developing, but not running, our application. Only this time we also want to install our module globally:

npm install --global gulp

This would allow us to run it from the Terminal/Command Prompt. To check whether you have Gulp.js installed, run this command:

gulp

You should see the following output:

No gulpfile found

This means that you have successfully installed Gulp.js.

What is this gulpfile anyway? It's a file where we describe our build process. Create gulpfile.js in your ~/snapterest/ directory and add the following content to it:

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('I am about to learn the essentials of React.js');
});

Now if you run the gulp command, you will see output that looks like this:

Using gulpfile ~/snapterest/gulpfile.js
Starting 'default'...
I am about to learn the essentials of React.js
Finished 'default' after 62 μs

By default, when you run gulp, it executes a task called (no surprise here) default. Well done! You now have a working Gulp.js build system. Let's create a task that will package our source and dependency modules using Browserify.

Replace the content of your gulpfile.js with the following code:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function () {
  return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('snapterest.js'))
        .pipe(gulp.dest('./build/'));
});

As you can see, we will use the require() function to import three new dependency modules: browserify, babelify, and vinyl-source-stream. We have already installed the browserify module, so now let's install the babelify module:

npm install --save-dev babelify

The babelify module allows us to write the JSX syntax that we'll introduce in the next chapter.

Why do we need the vinyl-source-stream module? In a nutshell, it allows us to use Browserify and Gulp together. If you're interested in more details on why this works, go to https://www.npmjs.com/package/vinyl-source-stream. Let's install our vinyl-source-stream dependency module:

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

Now we're ready to test our default task. Run this command:

gulp

The output should look something like this:

Using gulpfile ~/snapterest/gulpfile.js
Starting 'default'...
Finished 'default' after 48 ms

More importantly, if you check your project's ~/snapterest/build/ directory, you'll notice that it now has the snapterest.js file with some code already inside it—that's our (empty) JavaScript application with some Node.js modules that are ready to run in a web browser!