Basics of setting yourself up with Gulp and Babel.
In this example I am going to look at compiling ES6 to ES5 using Babel, but this example will work with compiling your React jsx code as well. As long a you know how to configure Babel.
This is what my project folder structure looks like:
src/index.js contains the ES6 code and gulp will create a compiled version inside the
The ES2015 code I am using to test is
Let’s install everything we need
We need the babel core, CLI and es2015 preset:
We need gulp and the babel module for gulp.
Also make sure you have
gulp installed globally.
Configure babel to use the es2015 plugin in your package.json (or .babelrc if you prefer).
gulpfile.js and require the two gulp libs:
Then declare our default task:
Then for our task content:
- Pick up the js files in
- Compile it with babel
- Put everything in
Run the build script using
And your compiled files will be in the output folder.
This is what my
index.js looks like after being transpiled:
If you want to write your
gulpfile.js in ES2015 and your version of node does not support it, follow the instructions in this article.