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.
npm install gulp --global
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.