Barebones ES6 project using Gulp

If you haven’t crawled out from underneath your rock yet then let me take hold of you so I can share a secret. ECMAScript 6 is on it’s way and it’s coming fast!

I previously discussed preparing for ES6, but let’s take things one step further and examine an actual project using the tools I discussed in that article. It’s time to get our ES6 on and discover the steps required in order to setup a barebones ES6 project with the help of our faithful tooling companion Gulp.

BTW: I won’t be explaining how to install gulp, npm or node, but feel free to ask if you have questions.

---

Dependencies

Since features such as template literals in ES6 are not supported yet by any browser nor in Node.js that means you’ll need a transpiler like gulp-babel to churn ES6 code into vanilla ES5.

npm install --save-dev gulp-babel

Following the gulp-babel installation you’ll need to write a task from within your primary Gulp file (gulpfile.js).

var gulp  = require('gulp'),
    babel = require('gulp-babel');

gulp.task('es6to5', function () {
    return gulp.src('js/src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

Write ES6 Yo!

Seeing that we have a task that filters ES6 code into useable ES5 code we can actually start writing some ES6 so lets do that right now!

Make a new file called app.js and place it within your directory of choice. For this example I’ll make one called js/src.

Since I really dig the template literals feature of ES6 I’ll use that feature as an example for our gulp-babel task.

ES6 written for app.js

// Expression placeholder
var developer = 'Dennis Gaebel';

console.log(`Yo! My name is ${developer}!`);

// Expressions w/object literal
var author = {
    name: 'Gray Ghost Visuals'
};

console.log(`Thanks for writing awesome articles, ${author.name}.`);

Babel all ES6 things!

It’s great that we know how to write in ES6 all of a sudden, but like I said in the beginning of this article we need to filter our ES6 files so we can actually output useable information to browsers.

Since we already have a task in place all we need to do is simply run the gulp babel task that we created earlier. Or better still, add the babel task to your watch task so it’s doing its thing all the time.

$ gulp es6to5

Conclusion

If you would like to dig deeper into various options that gulp-babel provides you can refer to this list of additional options.

Happy ES6ing!