3. Gulp Improves the Workflow

After running JSX manually once, it’s pretty clear that we won’t want to keep running that every time we make a change. Instead of running JSX and then Node over and over again, we’ll use Gulp to automatically run JSX and Node for us.

1. npm install gulp --global
2. npm install gulp --save-dev

We’ll need to create a gulpfile.js at the root of our project. Let’s start with their skeleton:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

But then we’ll create a jsx task that will use the react-tools package to transform our index.jsx file into a ./lib/index.js file.

var gulp = require('gulp')
  , fs = require('fs')
  , reactTools = require('react-tools')

var transform = function(srcFile, destFile, cb) {
  console.log('Reading %s...', srcFile)

  var src = fs.readFile(srcFile, {encoding: 'utf8'}, function(readErr, data) {
    if (readErr) {
      cb(readErr)
    }
    else {
      console.log('Writing %s', destFile)
      fs.writeFile(destFile, reactTools.transform(data), function(writeErr) {
        if (writeErr) {
          cb(writeErr)
        }
        else {
          cb()
        }
      })
    }
  })
}

gulp.task('jsx', function(cb) {
  fs.mkdir('./lib', function(err) {
    transform('index.jsx', './lib/index.js', function(err) {
      cb(err)
    })
  })
})

gulp.task('default', function() {
  gulp.start('jsx')
})

Now if we run gulp from the terminal, it will run the JSX transformation for us. We’re halfway there; the other half is to make gulp spawn off a Node process for running the created ./lib/index.js file too.

Next » Running Node Through Gulp