Justin Chmura

Simple Gulp Workflow for React

By on

On my always be learning.

React has been the library in the forefront of everyone’s mind recently. The fact that it was focused on doing one thing extremely well, is appealing to me. Angular is great for building complete apps, but you are committing 100% to that ecosystem for all pieces. React does the “V” in MVC and that’s it.

Since React uses jsx, a transpile step is somewhat required (although not always). I also wanted to throw Browserify on top of that to dive head first into using ES6 as well. I’ve setup a simple Gulp workflow for React that if you’re looking to get into React, is a good starting point for writing apps.

Workflow Goals

Simplicity is the key. I’m not a fan of overly complicated Gulp setups that are a spaghetti of commands. I feel the Gulpfile should be an easy read for anyone coming into the project afterwards.

The goal is to have one for bundling JavaScript, one for bundling CSS, and to have one, possibly two tasks for spinning up the Express server. The server tasks can be optional if the app is a purely static app.

Necessary Packages

The great thing about Gulp is that there’s a plugin for almost anything you want to do. This is a result of how Gulp is stream based so that plugins don’t have to be tailored specifically for Gulp. For my JavaScript workflow, there will be no Gulp specific packages.

Here’s the NPM install of the packages:

npm install --save-dev browserify babelify reactify vinyl-source-stream

The weird one in that list is vinyl-source-stream. This is a small piece but it takes the result of browserify and converts it into a stream that Gulp will still recognize. That allows up to stay within Gulp’s pipeline. This is a minor technicality but if you need to know more, you can read about it on vinyl’s Github.

Setting up the Task

Here’s my task:

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

gulp.task('bundle', ['jshint'], () => {
  return browserify({
    entries: 'app/js/app.js',
    debug: true,
    transform: [babelify, reactify],
    paths: ['app/js']

The app.js is the start of the React app so that’s where the pipeline starts. The ‘transforms’ are the other two machines that we want to use to process our code. Browserify bundles it all up, it then gets put through vinyl in order to continue the Gulp stream.

Lastly, the processed code gets saved to the .tmp directory. This directory ends up getting ignored by source controls as compiled assets shouldn’t be checked in.

This can be enhanced by adding in watch tasks, and live reload to whatever server back-end you’re using, but this simple task should give you a solid starting point when getting into React development. Not only that, it brings ES6 into the forefront and allows you take advantage to all the new features it offers.

Since I’m new to React, I’m curious to see what you guys are using for Gulp tasks. This is a real simple example for newbies, but if you’re doing React in production, I’d love to discuss it.