I wanted to play with ReactJS last week and figured I would just add another gulp talk to my build process, being that it's all the rage right now.
It turns out that it wasn't that simple, as it turns out that the
gulp-react has been "deprecated in favor of gulp-babel". I hadn't planned on learning Babel, but it turns out it wasn't very difficult once I was able to put all the pieces together.
Here's what I did.
You can find an extended version of the code in this post in my web project's
gulpfile.js. As of this writing, it can be found in the
feat/talks branch but should be merged into the
master branch soon enough.
The Gulp Task
Let's start with the gulp task and I'll walk you though it step by step.
It's not overly complex, but there is a lot going on. Let me walk you though it.
These are the packages I used in this solution. Here's the breakdown in case you don't feel like searching out each one:
- gulp is the build tool itself
- gulp-babel is the babel plugin that builds react for us
- gulp-sourcemaps is a pluging that generates sourcemaps for us
There are a couple of unlisted packages that you'll need as well. More specifically, the Babel preset packages. I use two:
- babel-preset-react which does the ReactJS stuff we need
Things start simple with the declaration of my source files and kicking off the gulp pipe:
var src = [
Next up, I intialize the sourcemaps plugin
If you're not sure what sourcemaps are, look them up as all the browser development tools support them and they made debugging transpiled code much easier.
Now, we leverage all the Babel things and do the actual transpilation.
At this point were piping our source code into Babel, and it applies the preset babel plugins for ES2015 and React. If you didn't include the presets earlier, you would get an error at this point so make sure they're installed.
Et voila! Your gulp task transpiles your JSX and JS files. You can even use some ES2015 to boot.