<commit_before>---
layout: default
title: Gulp Improves the Workflow
step: 3
---
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 --global gulp`
1. `npm install --save-dev gulp`

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

<pre class="brush: js">
var gulp = require('gulp');

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

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.

<pre class="brush: js">
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')
})
</pre>

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](4-gulp-node)<commit_msg>Fix broken Next link<commit_after>---
layout: default
title: Gulp Improves the Workflow
step: 3
---
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 --global gulp`
1. `npm install --save-dev gulp`

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

<pre class="brush: js">
var gulp = require('gulp');

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

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.

<pre class="brush: js">
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')
})
</pre>

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](04-gulp-node)
{'fraction_non_alphanumeric': 0.1396103896103896, 'fraction_numerical': 0.002976190476190476, 'mean_word_length': 3.1446188340807173, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5422757', 'n_tokens_mistral': 1243, 'n_tokens_neox': 1208, 'n_words': 432}